CSS Layout Help

[focus]

How do i get this layout? I've got everything besides the little area on the left which I've circled in red.

I've attached a file with the layout i want.


This is my current CSS:



body {
margin:0;
}


#wrap {
width:780px;
margin:auto;
float:left
}

#header {
width:780px;
height:150px;
background:#00CCFF;
}
#menu {
float:left;
width:180px;
background: #333;
}
#content {
float:right;
width:600px;
}

 

[misson]

Please post minimal HTML source for the CSS to style. It's hard to develop CSS without that information.

 

[focus]

<div id="wrap">
<div id="header"><img src="heading.jpg" width="781" height="153" /></div>
<div id="menu">
<p>Home</p>
<p>About</p>
</div>
<div id="content">
<p>bla</p>
</div>
</div>

 

[Scoochi2]

you could create a new div with it's own class/id and give it an absolute position of top:0px and left: 0px

 

[misson]

The HTML structure doesn't seem to reflect all the elements in the paper prototype. In your prototype, is "Heading" an image or text? Is the circled region (the image of people) part of "heading.jpg" or something else?

Specifying pixel dimensions (all the "width" and "height" CSS properties and HTML attributes) leads to more work down the line. Most of it is unnecessary; you can code it so the elements size themselves automatically based on content and window size.

Oh, and don't forget to put

, [php] or [code] tags (as appropriate) around posted source to preserve formatting, separate code from commentary and colorize the code (which can help find typos).

 

[freecrm]

Firstly, you might want to consider using a wider "wrap". Very few users still use an 800x600 resolution and the lowest, most common denominator is 1024x768 res.

Assuming you want completely seperate divs rather than one header image as misson states, there are two ways you can do your layout..

First is the simplest and probably safest.. within your header div, just add (nest) two more divs (say id's headleft and headright), the first being float-left and the same width as your menu and the second being an "auto" width (which will fill to the outside of the wrap). This first option will be easy to change in the future if you want to return to a wide header div. You might also want to reconsider your div structure for "content"... as follows...

<div id="wrap">
[INDENT]<div id="header">
<div id="headerleft">
<img src="whatever.jpg"/>
</div><!--end headerleft>
<div id="headerright">
Heading image/text
</div><!--end headerright-->
</div><!--end header-->
<div id="contentwrap">
<div id="menu">
menu links
</div><!--end menu-->
<div id="maincontent">
lots of text and stuff
</div><!--end maincontent-->
</div><!--end content-->
<div id="footer">bottom stuff</div><!--end footer--><!--yes this is extra-->[/INDENT]
</div><!--end wrap-->

The second, would be to start with two column div's within the wrap, and then nest horizontal cells within each column.

Either way, all space below your menu is gonna be empty - which is why quite a few developers use a top menu bar.

Errr.. not sure why you need float-left on your wrap?

 

[focus]

freecrm, I did what you said and it turns out the way i want it but the only problem now is that the content section goes under everything and is not located next to the menu.

My CSS:

body {
margin:0;
}


#wrap {
width:780px;
height:auto;
float:left;
}

#header {
width:780px;
height:150px;
}

#headleft
{
float:left;
width:180px;
}

#headright
{
float:right;
width:auto;
}

#menu {
float:left;
width:180px;
background: #333;
}
#content {
float:right;
width:500px;
}



HTML:
<div id="wrap">

<div id="header">

<div id="headleft"><img src="heading.jpg" width="180" height="153" /></div>

<div id="headright">
<img src="heading.jpg" width="600" height="153" />
</div>

</div>





<div id="menu">
<p>Home</p>
<p>About</p>
<p>Classes</p>
<p>Location</p>
<p>Contact</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp; </p>
</div>

<div id="content">
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>bla</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

</div>

</div>



Also i placed Float-left on the wrap because if i dont the wrap doesnt go right to the left hand side. THere is a gap. Didnt know how else to do it...

 

[freecrm]

This is why I suggested revising your content section. lol.

You should keep in your mind that the page should be split into major divs first.

i.e. - wrap first

then sub-divs header, content, footer.

Then all other divs can fit within these. If you have a menu and maincontent, you should ideally have another container around it. Its not strictly necessary, but very helpful. If you check out my first post, you'll see the differnce between contentwrap and maincontent.

 

[focus]

Thanks a lot freecrm. It looks just how i wanted it!

 

[focus]

Unfortunately i ran into another problem. I'm just wondering why does this happen?
I want the Menu to go all the way down to the bottom....

Code:

<div id="contentwrap">
<div id="menu">
<p>Home</p>
<p>Session Times</p>
<p>Fees</p>
<p>Upcoming Events</p>
<p>News</p>
<p>Contact</p>
</div>

<div id="maincontent">
<p>&nbsp; </p>
</div> <!--end maincontent-->
</div><!--end content-->

 

[freecrm]

Just use vertical-align: bottom in your menu css definition.

 

[misson]

Just use vertical-align: bottom in your menu css definition.

The vertical-align property aligns line boxes for inline elements, so wouldn't affect the menu (if the menu had a display of "inline-block", however...). Even if it did, I believe Focus wants to stretch the height of the sidebar, not merely align its bottom with the top of the footer.

@Focus: As I said before:

Oh, and don't forget to put

, [php] or [code] tags (as appropriate) around posted source to preserve formatting, separate code from commentary and colorize the code (which can help find typos).[/QUOTE]
To put it simply, use [html], [php] or [code] tags to make your code readable.

The problem arises because when the [URL="http://www.w3.org/TR/CSS2/visudet.html#root-height"]height of a float[/URL] is 'auto', it will shrink-wrap. You can set the height to a percentage, but
[quote] If the height of the containing block [#contentwrap, in this case] is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.[/quote]
Because #contentwrap has a height of "auto", even if you set "height: 100%" on #menu, it will become "height: auto" and will still shrink-wrap. As you probably don't want to explicitly set the height of #contentwrap, another solution must be found.

A common solution is to use [URL="http://www.alistapart.com/articles/fauxcolumns/"]faux columns[/URL] to make it appear that all the columns are full height. Another is to apply [FONT="Courier New"]display: table-cell[/FONT] to the columns, though this [URL="http://www.quirksmode.org/css/display.html"]doesn't work in IE[/URL] through at least IE7 (IE8 may support it).

Also, get rid of all the "<p>&nbsp;</p>". HTML should define the structure of a document, and those paragraph elements are presentational (unless they represent menu items that are to be defined later).