Full width divisions using HTML5 and CSS3 (responsive)

StackOverflow https://stackoverflow.com//questions/25076798

  •  02-01-2020
  •  | 
  •  

Question

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

Was it helpful?

Solution

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 */
}

OTHER TIPS

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 =

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

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/

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

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top