homepage Welcome to WebmasterWorld Guest from 54.166.84.82
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Struggling with CSS layout and styling
css styling
klendino

5+ Year Member



 
Msg#: 3803383 posted 2:50 pm on Dec 9, 2008 (gmt 0)

I created a site and have some problems with the layout.
The site is setup with 3 wrappers
1=page wrapper
2=left column wrapper
3=content wrapper
The left and content wrapper I used to apply the faux column method.

Now, in the left column I have 4 divs (being navigation, news, calendar & picrure)

Those 4 divs I had to place inside one another in order to have them display correctly as a floating element in the left column. The effect of this is that the styling of all those 4 divs are coming from the navcol element and I'm unable to style the other divs differently.

Any suggestings on how to fix this or to have the 4 floating elements seperately on the left.

Doctype:
========
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Html Code:
==========
<div id="column2">
<div id="column1">
<div id="navcol">
<h2>.:: Navigation</h2>
menu
<div id="news">
<h2>.:: Nouvelles</h2>
news item
<div id="calendar">
<h2>.:: Calendrier</h2>
calendar item
<div id="photo">
<h2>.:: Picture</h2>
Picture
</div>
</div>
</div>
</div>
<div id="main">
<h2>.:: title</h2>
content
</div>
</div>
<div class="clear">&nbsp;</div>
</div>
</div>

CSS code:
=========
div#column2 { /*Content*/
margin: 0;
padding: 0;
background-image: url('images/style/1x1contentTP.png');
background-position: right;
background-repeat: repeat;
width: 100%;

}
div#column1 { /*Navigation*/
margin: 0px;
padding: 0px;
background-image: url('images/style/1x280leftTP.png');
background-repeat: repeat-y;
width: 100%;

}
div#navcol {
padding: 0;
width: 250px;
float: left;
}
div#calendar {
padding: 0;
width: 250px;
float: left;
}
div#photo {
padding: 0;
width: 250px;
float: left;
}
div#main {
padding: 0 10px;
margin-left: 280px;
}
.clear {
clear: both;
display: block;
height: 1px;
overflow: hidden;
margin: 0;
padding: 0;
}

I hope the explanations is clear, thanks

Klendino

 

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3803383 posted 3:15 pm on Dec 9, 2008 (gmt 0)

try not to place them one inside the other and give them all float:left and clear:left .

klendino

5+ Year Member



 
Msg#: 3803383 posted 3:37 pm on Dec 9, 2008 (gmt 0)

hi Swa66

Thanks a lot, this solved my problem!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved