current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 0 down vote favorite

I am relatively new to StackOverflow and am experiencing some difficulties while making a webpage

So what I require is a one page website divided into different sections, which are full-width divs (i.e 100% width of the screen)and are consecutive with different background colors.

The problem I am facing is that the divs do not take up the full width of the screen and have white space not only on the sides, but also between 2 divs
Also, when the window size reduces, the gap between divs increases

The desired result is as observed in the following websites:

http://classrebels.com/
http://startbootstrap.com/templates/freelancer/

The code I am using is as follows:

i) HTML:

    <html>
    <body>
    <div class="full" id="one">
    <h1>Just something</h1>
    </div>
    <div class="full" id="two">
    <h1>Just something</h1>
    </div>
    </body>
    </html>

ii) The CSS:

    .full{
    width= 100%;
     }
    #one{
     background-color: #fff;
    }  
    #two{
     background-color: #f13;
    }

Please do tell me where I am going wrong

share|improve this question

6 Answers 6

up vote 0 down vote accepted

Demo

html

<div class="full" id="one">
     <h1>Just something</h1>
</div>
<div class="full" id="two">
     <h1>Just something</h1>
</div>

css

body, html {
    width: 100%;
    height: 100%;
    margin:0; /* default margin set to 0 */
    padding:0; /* default padding set to 0 */
}
.full {
    width: 100%;
}
#one {
    background-color: gray;
    height: 50%; /* whatever you want to give height */
}
#two {
    background-color: #f13;
    height: 50%; /* whatever you want to give height */
}
.full h1 {
    margin:0; /* default margin of h1 tag set to 0 */
    padding: 20px 10px 10px 20px; /* padding if you want to give spaces between borders and content of div */
}
share|improve this answer
up vote 0 down vote

Demo Fiddle

To remove the default margin/padding on the viewport (which is giving you the whitespace), you need to add the following CSS:

html, body{
  width:100%; /* <-- also a good idea to add */
  margin:0;
  padding:0;
}

and change:

.full{
  width= 100%;
}

to:

.full{
  width:100%;
}

CSS style property/value pairs are seperated with a colon : and not an equals =

share|improve this answer
up vote 0 down vote

have you tried setting margin and padding 0 in full and in body tag too like

 .full
{
    width :100%;
   margin:0px;
   padding:0px;
     }

similarly your heading also takes some margin so set the margin of heading as required. for better please consult this link w3schools

share|improve this answer
up vote 0 down vote

You have to change the body and h1 margins, since they have default values in the browser. I've fixed it for you in this fiddle:

h1{
  margin: 0px;
}
body{
  border: 0px;
  padding: 0px;
  margin: 0px;
}

http://jsfiddle.net/pWLgb/

share|improve this answer
up vote 0 down vote

the problem is that you dont give the whole div a background color but only the text.

if you ad a border you can see the real size of the div and it will fill the whole div with color.

check out the fiddle i made for that

 border: 1px solid black;

http://jsfiddle.net/2h4kQ/

you can set the border to 0px so it is not shown and it will give you the right result

share|improve this answer
    
jsfiddle.net/2h4kQ/2 – Ferdinand Fatal Aug 1 '14 at 9:29
up vote 0 down vote

The demo's that you linking to aren't using full width divs. They actually use a full width <section> element which has the background color set on it.

Then, they have an inner row <div> which then has a container and column <div>. So in the Freelancer example it looks like this:

<section class="success" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>About</h2>
                    <hr class="star-light">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-lg-offset-2">
                    <p>Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
                </div>
                <div class="col-lg-4">
                    <p>Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
                </div>
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <a href="#" class="btn btn-lg btn-outline">
                        <i class="fa fa-download"></i> Download Theme
                    </a>
                </div>
            </div>
        </div>
    </section>

Sample of the CSS:

section.success {
color: #fff;
background: #18bc9c;
}

.container {
width: 1170px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}

Download that template, it uses Bootstrap, and play around with it to get the look you want.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.