Im new to css and learning it, im stuck in floating lauout...
What im doing wrong here? The menu is floated left and Content is floated right but whenever i want toadd a third column and float 2nd column to left it goes all the way left and cause some weird stuff,? like the screenshot i attached,
http://i40.tinypic.com/2hmkd41.jpg
Html:
<body>
<div class="wrapper">
<div class="header">
<h3>myBlog</h3>
<p>Blog site</p>
</div>
<div class="content">
<div class="primary">
<div class="primary">
<h3>Lorem ipsum</h3>
<p>Do your layouts deserve better than Lorem Ipsum? Apply as an art director and team up with the best copywriters at Jung von Matt: www.jvm.com/jobs/lipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget orci et erat vehicula interdum. Duis nec neque nec nisl volutpat facilisis eu vel felis. Nam ac tellus ac augue porttitor dictum. Curabitur ac justo lorem. Fusce suscipit faucibus est, quis tincidunt felis rhoncus ac. Quisque nisl risus, luctus eget adipiscing a, sollicitudin id nisi. Donec at sem lacus, rhoncus sollicitudin neque. Nunc risus lectus, mollis in bibendum eu, aliquam nec massa. Fusce eget orci diam, id luctus ligula. Proin elementum tempus ornare. Nulla sed velit imperdiet mauris vehicula ornare.
Suspendisse imperdiet rutrum purus, in tincidunt diam molestie eu. Suspendisse nunc tellus, sodales sed feugiat at, ultricies at ante. Quisque quis ante nisi, in consectetur mauris. In hac habitasse platea dictumst. Nunc quis urna in velit pretium placerat. Donec placerat auctor vehicula. Vestibulum tristique aliquam faucibus. Etiam sagittis rhoncus ipsum nec dignissim. Phasellus pretium leo feugiat turpis condimentum rhoncus. Curabitur lacus eros, lacinia eget elementum vitae, lobortis non ligula. Donec convallis imperdiet mi, sit amet imperdiet dui venenatis sit amet. Donec sapien justo, interdum a pulvinar non, ullamcorper ut tortor. Mauris aliquam diam in mauris pharetra vel accumsan ligula imperdiet. Pellentesque semper, purus non sodales fermentum, erat mauris feugiat quam, nec mattis leo massa id ligula.
</p>
<div class="secondary">
</div></div></div>
<div class="secondary">
<ul class="nav">
<li><a href="#">blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">download</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">tagGroup</a></li>
<li><a href="#">checkList</a></li>
</div>
<div class="footer">
</body>
Css:
* {
margin:0;
padding:0;
}
body {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
background-color:#999;
}
.content .secondary ul {
list-style:none;
margin:0;
padding:0;
width:20%;
float:left;
background-color:#CCC;
display:inline;
}
.content .secondary {
background-color:#CCC;
}
.content .secondary ul a {
color:white;
text-decoration:none;
margin-left:1.22em;
}
.wrapper {
width:58%;
margin: 0 auto;
}
.header {
background-color:#333;
height:110px;
padding:5px;
}
.header h3 {
color:white;
text-shadow:3px 3px 3px #000;
margin: 1em 0 0 2em;
}
.header p {
color:white;
font-size:12px;
margin: 1em 0 0 2em;
}
.content .primary .primary {
width:40%;
background-color:white;
}
