Jump to content

positioning problem


balushyno1

Recommended Posts

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;
}

Link to comment
Share on other sites

Try this:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}

body {
font-family:Georgia, "Times New Roman", Times, 

serif;
font-size:16px;
background-color:#999;

}
.secondary ul {
list-style:none;
margin:0;
padding:0;
/*width:20%;*/
/*float:left;*/
background-color:#CCC;
display:inline;


}
.secondary { float: left; width:20%;
background-color: yellow;/*#CCC;*/
}
.secondary ul a {
color:white;
text-decoration:none;
margin-left:1.22em; 
}
.wrapper {
width:58%;
margin: 0 auto; background: teal;
}
.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  { float: right;
width:40%;
background-color:white;
}
.thirdcol { background: skyblue; }
.footer { clear: both; background-color: green; }
-->
</style>

</head>

<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></div><!--</div>-->

     <!--<div class="secondary">-->


     <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>
     </ul>
     </div>

<div class="thirdcol"><p>Third Column</p></div>

     <div class="footer"><p>Footer</p></div>
</div><!--end of .wrapper-->
</body>
</html>

I've added a doctype at the top, closed unclosed tags, deleted duplicate secondary divs, changed the styles from .content .secondary to just .secondary as .secondary isn't inside the .content div and a few other things. You can nest another div inside .content if you want, at moment it only has the nested .primary div inside.

It validates with no errors.

I'm not quite sure if it's what you want, but you can edit it.

Edited by Wickham
Link to comment
Share on other sites

yeah it worked and i also tried the same technique but i want the content on right which has white background to be in middle with css without touching html markup, if you float the content primary to left it goes all the way left causes menu and third col to go right. i want to position third col to right(sidebar) and content in wight background in middle like its main content.

Link to comment
Share on other sites

Is this it?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}

body {
font-family:Georgia, "Times New Roman", Times, 

serif;
font-size:16px;
background-color:#999;	
}
.secondary ul {
list-style:none;
margin:0;
padding:0;
/*width:20%;*/
/*float:left;*/
background-color:#CCC;
display:inline;


}
.secondary { float: left; width:20%;
background-color: yellow;/*#CCC;*/
}
.secondary ul a {
color:white;
text-decoration:none;
margin-left:1.22em; 
}
.wrapper {
width:58%;
margin: 0 auto; background: teal;
}
.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 { margin-left: 20%; margin-right: 20%;
background-color:white;
}
.thirdcol { background: skyblue; float: right; width: 
20%; }

.footer { clear: both; background-color: green; }
-->
</style>

</head>

<body>
     <div class="wrapper">

     <div class="header">
     <h3>myBlog</h3>
     <p>Blog site</p>
     </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>
     </ul>
     </div>

<div class="thirdcol"><p>Third Column</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></div><!--</div>-->


     <div class="footer"><p>Footer</p></div>

</div><!--end of .wreapper-->
</body>
</html>

First code the float:left and float: right cols, then code the middle (.content) column with no width and no float but add side margins equal to the left and right cols like I have.

 

Here are some variations of layouts, some with floats.

http://www.wickham43.net/threecolumns.php

I used item 9 in my code above (with % instead of px) or 17 but you could use three floated divs like item 5.

Remember that margin, padding and borders add to the element's basic width so if you add those to the side divs the margins on the middle div will need to be increased.

Edited by Wickham
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...