CODEWITHSUNDEEP
htmlcsswordpresssidebar
notcho nachos
notcho nachos

Reputation: 307

Two container divs causing sidebar to not float properly

http://www.guytgunterappliances.com/product-category/shop/

My site contains two container divs. An inner and an outer(which contains the whole site). I am trying to float my sidebar(which is displayed under my content div) to the left of the content div by reducing the width to 710px. however, the outer container is limiting how my sidebar floats left. How do i fix the two containers so my content is still centered and my sidebar is floated left.

enter image description here

SIDEBAR

*************************************************************************/

#sidebar{

position:relative;

z-index:10;

width:270px;
 display:block;
 float:left

}

Upvotes: 0

Views: 135

Answers (1)

Appel
Appel

Reputation: 497

Give your container this styling:

#container{
display: inline-block;
width: 600px; 
overflow: hidden;
}

And give your sidebar this styling:

#sidebar{
float: right;
}

Your sidebar will now align to the right and your container to the left. Do you mean this? I just give the overfow hidden because you have to many colums at the moment.

Picture: http://s15.postimg.org/5gpgxzfaz/example.png

EDIT:

You can set this styling on the ul [products]. 

ul.products {
float: left;
width: 700px;
overflow: hidden;
}

You can give this options to the sidebar.

#sidebar{
float: right;
}

Now it should working.

Upvotes: 1

Related Questions