Search code examples
htmlcsspercentageresponsiveness

Exclude div from 60% width within a wrapper

I'm creating a website that has the following setup:

<html>    
<body>
    <div class="wrapper">
        <div class="wrapper_devider">    
            <div id="header"></div>
            <div class="slider"></div> 
            <div id="container"></div> 
            <div class="sidebar"></div>  
            <div id="footer"></div> 
        </div>
    </div>
</body>
</head>

The css is as following:

.wrapper{
margin: 0 auto;
max-width: 1500px;
}

.wrapper_devider{
width:60%;
padding:0 20%;
}

#header{
float: left;
width: 100%;
}

.slider{
display:block;
float:left;
width:100%;
background-color:#0000FF;
height:150px;   
}

#container{
float: left;
width: 100%;
}

.sidebar{
float: left;
width: 100%;
background: #eeeeee;
display: inline;
}

#footer{
display:block;
float: left;
width: 100%;
}

The .wrapper has a fixed width of 1500px and the rest is done with %. The thing I can't seem to fix is that I want the slider to be full width. I have tried to set the width if the .slider to 1500px but it only expands to the right.

Can anybody see what I do wrong?

M.

Solution

  • The wrapper has a max-width of 1500, this is different then a fixed width, this would look like

    width: 1500px;

    Even if you set the width to 1500, it still won't work because your slider element is inside your divider.

    I would recommend the following layout:

    HTML

    <body>
    <div class="wrapper">
        <div class="wrapper_divider">    
            <div id="header">header</div>
        </div>
        <div class="slider">slider</div> 
        <div class="wrapper_divider">
            <div class="container">container</div> 
            <div class="sidebar">sidebar</div>  
            <div class="footer">footer</div> 
        </div>
    </div>
</body>

    CSS

    .wrapper{
  margin: 0 auto;
  width: 1500px;
}

.wrapper_divider{
  width:60%;
  padding:0 20%;
}

#header{
  float: left;
  width: 100%;
}

.slider{
  display:block;
  float:left;
  width:100%;
  background-color:#0000FF;
  height:150px;   
}

#container{
  float: left;
  width: 100%;
}

.sidebar{
  float: left;
  width: 100%;
  background: #eeeeee;
  display: inline;
}

#footer{
  display:block;
  float: left;
  width: 100%;
}

    I've made an example of how it would look: http://jsfiddle.net/zon1d0gz/