Side by side divs, with a width

mikeken763

07-26-2011, 10:29 PM

Hello,

I will post the html/css below but can anyone explain to me how to get the un-ordered list with ID=menu over to the right. I want the top green bar to span the width of the page but have the logo and navigation menu and content to be "wrapped" in a centered area that is 63em wide. Right now I have it so that logo is in the right spot but I cannot get my nav menu to place right without messing everything else up.

If you wanted to take the time just saving this code into an html file should show you exactly what I mean because I cannot explain it very well.

Thanks!

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
font-family: Verdana, Geneva, sans-serif;
font-size: 1em;
width: 100%;
min-width: 63em;
margin-left: auto;
margin-right: auto;
}

#header {
height: 4em;
background-color: #ADD3A5; /*border: 1px solid #000;*/
}

#logo {
width: 63em;
margin-left: auto;
margin-right: auto;
}
#menu {

}
#menu ul {
}
#menu ul li {
}
#content {
margin-top: 8em;
margin-left: auto;
margin-right: auto;
width: 63em;
}
.clear {
clear: both;
}
</style>
</head>

<body>
<div id="container">
<div id="header">
<div id="logo"><img src="logo.png" width="223" height="149" alt="Hippie Mulch logo" longdesc="http://hippiemulch.com#"></div>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Order Now</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Far Out Facts</a></li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin venenatis pulvinar odio, et egestas tortor euismod sed. Donec tincidunt mollis nisi, eget facilisis leo varius ut.
Curabitur justo risus, porttitor egestas posuere nec, placerat eu dolor. Etiam elit felis, tincidunt vel fringilla eget, rhoncus a lorem. Donec nunc nisi, semper quis eleifend ac, scelerisque eget lorem. Phasellus auctor tincidunt nisl vitae tristique. Curabitur laoreet tincidunt massa varius sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ante orci, blandit et semper eu, porttitor consequat nisl. Suspendisse tristique euismod lobortis. Aenean sit amet diam magna, vitae posuere ligula. Sed faucibus, mauris nec elementum viverra, lacus mi aliquet mauris, vel varius enim turpis a justo. Pellentesque blandit venenatis augue ut ornare. Cras vel neque lacus, at auctor lectus. Suspendisse potenti. Nam non urna augue, vitae fringilla nisl. Praesent blandit orci quis orci luctus id bibendum magna auctor. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam adipiscing mauris a justo vehicula varius. Aenean congue rhoncus nibh, vel dignissim turpis pulvinar id. Mauris
vehicula tincidunt nisi a pretium. Maecenas semper nibh fringilla dui mattis quis volutpat ipsum tempus. Vestibulum ullamcorper tincidunt lacus, et facilisis diam ornare sed. Maecenas pulvinar, velit a pulvinar ultricies, mi tortor dignissim tellus, at consectetur metus diam sit amet arcu. Fusce luctus rhoncus quam et posuere. Aliquam vel magna mauris, at varius mi. Curabitur nec risus non nulla volutpat fermentum. Mauris turpis quam, cursus quis dapibus non, egestas nec lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin enim ligula, ullamcorper ac sollicitudin eget, lacinia lobortis quam. Donec facilisis molestie eros sit amet ultrices. Quisque ut nibh nulla. Vivamus eget diam in lorem molestie laoreet. Nam eu scelerisque lectus. Sed eu metus diam, non dignissim erat. Morbi porta auctor lectus, at cursus mi porttitor ac. </p>
<p> Sed ac sagittis tortor. Praesent eget velit gravida odio pharetra faucibus eget vel tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla et purus urna, quis cursus quam. Cras lacus augue, pellentesque sit amet condimentum tincidunt, consequat non neque. Nullam in sodales quam. Morbi in purus nec purus iaculis molestie. Donec vestibulum nisi non purus placerat sit amet euismod est porttitor. Maecenas turpis lorem, tincidunt in varius porttitor, tempus nec erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sed diam ante. </p>
<p> Aenean mattis sollicitudin elit, ut sagittis augue malesuada rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam nisi mauris, tristique in consectetur a, suscipit eget sem. Donec id tortor mauris, posuere vestibulum justo. Nulla facilisi. Donec et aliquam tortor. Pellentesque fringilla sollicitudin ipsum eu blandit. Nullam ac gravida augue. Fusce at laoreet sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec posuere lorem et ipsum congue varius. </p>
<p> Phasellus suscipit ante eu massa porta vitae pellentesque augue ultrices. Sed ut fermentum metus. Suspendisse id egestas nisl. Nullam mattis sodales eleifend. Curabitur hendrerit adipiscing risus vitae laoreet. Etiam hendrerit arcu quis tellus vestibulum fringilla id et lacus. Pellentesque tortor lectus, malesuada ac consectetur vel, commodo accumsan odio. Morbi auctor accumsan mauris sed eleifend. Quisque sit amet lorem id diam placerat venenatis a sit amet odio. Integer mi mauris, bibendum ut hendrerit sit amet, consectetur et dui. In hac habitasse platea dictumst. Cras pharetra dignissim tempor. Aliquam at neque risus. Nulla fringilla sapien mollis dui vestibulum condimentum. </p>
</div>
</div>
</body>
</html>

Sammy12

07-26-2011, 10:39 PM

like this? I added a little style to a bunch of things. All of the things I added can be seen in the picture. the width: auto; was to cancel out the width you had set (you can see it crossed out to the right)

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-31.png

mikeken763

07-27-2011, 06:55 PM

Sammy12, do you think you could explain what exactly is happening with each of your changes you made?

On a side note, do you have a recommendation for a good resource for learning positioning and layouts using css? I haven't gotten on too well with the css positioning movement since it became popular. I have been using css with my website designs for a decade but not so much with positioning and so that is what I am trying to learn, but it seems so confusing and it appears there is a million ways to accomplish something with positioning which confuses me even further. Would you recommend I just keep cracking at it myself until I get it better or again is there a good resource?

Thanks

Sammy12

07-27-2011, 07:09 PM

Don't worry too much about it, this type of stuff is just learned with time.

When your floating or position: absolute; an object, they no longer are in the "flow of the page", meaning the element doesn't take up any space (no height! though it does take up width) relative to all the other objects on the page.

#logo {
float: left;
}

we are pushing the #logo to the left. It no longer takes up any space.

#menu {
float: right;
}

we are pushing the #menu to the right. It no longer takes up any space.

---

Everything underneath this will be pushed up because both floated objects do not take up any space.

This is where clearing comes in.
I used

.clear {
clear: both;
}

this will essentially give the float its space back on the page. sometimes you don't want floated or absoluted objects space on the page (these are called layers). You can choose which elements you want to clear with: clear: left;, clear:right;, clear:both;, and clear: all;

---

Another way to "clear" an object is to give its parent a height. Though the floated objects do not have a space, the header does! therefore it pushes the content down.

<div class="header" style="height: 80px;">
<div style="float: left;"></div>
<div style="float: right;"></div>
</div>

floating main objects like a side panel, the logo, etc is the correct way to position objects. Position: absolute; should be used for small positioning such as icons (a search icon within an input), but that's a different story that requires another post

mathewfarrell35

07-27-2011, 07:27 PM

On a side note, do you have a recommendation for a good resource for learning positioning and layouts using css? I haven't gotten on too well with the css positioning movement since it became popular. I have been using css with my website designs for a decade but not so much with positioning and so that is what I am trying to learn, but it seems so confusing and it appears there is a million ways to accomplish something with positioning which confuses me even further. Would you recommend I just keep cracking at it myself until I get it better or again is there a good resource?

Sammy12

07-27-2011, 07:30 PM

http://www.w3schools.com/cssref/pr_class_float.asp

There's really no easy way to learn this. Regardless, it's essential to learn since it's how modern pages are made.

It's one of those things that seems hard in the beginning, but once learned, you will be in love with it :)

mikeken763

07-27-2011, 07:51 PM

Thanks a lot Sammy12,

Your explanation was basically a mini-tutorial and has already helped me with some other positioning stuff on the same page you helped me with.