Question

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.

Answer 1

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/

Answer 2

OPTIONS

Move Slider outside of .wrapepr.
Make .wrapper 100% width and add new internal div of 60%.
If you cannot move the slider then make it position:absolute and offset the .wrapper with padding.

.wrapper {
  position:relative;
  margin: 0 auto;
  max-width: 1500px;
  padding-top:150px;
}
.wrapper_devider {
  width: 60%;
  padding: 0 20%;
}
#header {
  float: left;
  width: 100%;
}
.slider {
  position:absolute;
  left:0;
  top:0;
  display: block;
  float: left;
  width: 1500px;
  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%;
}

<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>

Answer 3

Your .wrapper class has max-width:1500px. This is an upper limit, I think you want: width:1500px.

.wrapper{
    width: 1500px;
    display: inline-block;
    height: 100%;
}

Also wrapper_devider is set to 60%, so the slider won't span the entire 1500px since the slider is nested within wrapper_devider. I would remove that div entirely, you don't need it.

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

Here's the solution with jsfiddle

Exclude div from 60% width within a wrapper

3 个答案: