Question

I’m having a problem with layout structure.

Here is a mockup: https://i.stack.imgur.com/PFMLi.jpg

And code:

<ul id="nav">
    <li></li>
</ul>
<div id="home">
    <div class="slider">
        <div class="heading"></div>
        <div class="slidebox"></div>    
    </div> 
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
</div>

I guess the easiest way would be to just add width style to each div but than I wouldn’t be able to nest styles which is not an option.

Right now #home div has 980px width which is perfectly fine but the problem is that slider has 100% background and the parent div has 980px. Maybe it’s too late but I just can’t find proper and semantic solution for this.

I would be really glad if someone could help me out here,

Thanks.

Answer 1

There are a couple of things you can try:

1. Separate out your slider div so you can get 100% of your page width.

   <div id="home">
       ...
   </div>
   <div class="slider">
       <div class="heading"></div>
       <div class="slidebox"></div>    
   </div>
   <div id="columns">
       <div class="col1"></div>
       <div class="col2"></div>
       <div class="col3"></div>
   </div>
   
   .slider { width: 100% }
   

2. Or you can set the z-index property of the slider div to a number higher than the index of the home so it renders on top.

   <div id="home">
       <div class="col1"></div>
       <div class="col2"></div>
       <div class="col3"></div>
   </div>
   <div class="slider">
       <div class="heading"></div>
       <div class="slidebox"></div>    
   </div>
   
   .home { width: 980px; z-index: 1 }
   .slider { width: 100%; position: relative; top:-50; z-index: 2 }
   

Note: You will have to adjust the positioning of the slider div.