Question

I am working with a template I picked up and modified to my liking. I am building a few templates and the last thing I was testing was the “content” area!

ISSUE:
The issue is, I want the navigation bar on the left (click on the titles for drop downs) to grow as the content grows and remain “empty”. Right now you see the content area is flowing into the navigation are. I want to the content area to flow down the middle and under the picture in the top right (product picture).

WEBSITE:
http://www.mediaortech.com/swiss3/productpagetemp.html see the problem here.

CSS
Here is the layout.css I am playing with. You can check the source if you need to but…

Nav is col-1, middle col-2, right is col-3

/*======= index-2.html =======*/
#page3 #content .row-1 .line-ver { background-position:190px top;}
#page3 #content .row-1 .line-ver-1 { background-position:647px top;}
#page3 #content .row-1 .col-1 {
width:190px;
margin-right:30px;
height:auto;
}
#page3 #content .row-1 .col-2 {
    width:430px;
    vertical-align:top;
    position:relative;
    margin-left:188;
}
#page3 #content .row-1 .col-2 .small {
height:20px;
width:100%;
}

#page3 #content .row-1 .col-2 .downloads {
height:110px;
width:425px;
}
#page3 #content .row-1 .col-3 { width:282px; float:right;}
#page3 #content .row-1 .col-4 { width:100%;}
#page3 #content .row-1 .col-4 .content1 {
height:100%;
}
#page3 #content .row-2 .line-ver1 { background-position:647px top;}
#page3 #content .row-2 .col-1 {width:628px; margin-right:40px;}
#page3 #content .row-2 .col-2 { width:267px;}

So best way to describe it…if the menu is expanded the content pushes over like it should…as soon and you contract it…there is more content text to it spills left into the navigation.

I’ve tried playing with the float…I am just not sure how to do this. Thanks for all the help big time!

Answer 1

First remove width:100% from .col-4 after that Write like this:

#page3 #content .row-1 .col-4 {
    clear: right;
    overflow: hidden;
}