Simple 2-Col layout problems...

**HEXtaC** · Sep 29, 2004 05:27

Hi,

I'm trying to constuct what, in real terms, is a simplistic page layout using CSS-P.

Maybe I'm being stupid - but here goes...

I am trying to constuct a page as follows:

header (viewport width)
leftMenu (width 150px)
content (as wide as necessary) - top aligned with top of leftMenu
footer (viewport width) - underneath the "tallest" of "Left Menu" and "Content"

Easy huh?

But, as soon as any content is greater than [viewportWidth - 150] (150=width of leftMenu), the content (depending, of course, on the CSS implementation) either slips below the leftMenu, disappears altogether(?), or has the footer right underneath the header with everything else below.

I could do this with a simple table construct in under a minute. So please - CSS gurus, can you advise me how to achieve this in CSS, as it seems impossible (10 hours+)?

I thought CSS was supposed to make design easy; If I'm not missing something and CSS can't achieve this (common) basic layout - what hope is there?

All comments truly appreciated,

HEX.

**pacman2504** · Sep 29, 2004 06:03

Sounds like you need Paul O'B's 2 column layout (there is a sticky thread in this forum):
http://www.pmob.co.uk/temp/2colfixedtest_4.htm

**HEXtaC** · Sep 29, 2004 06:35

Pacman2504,

Thanks for the suggestion - but that layout suffers the same problem as most of mine. Any content wider than the remaining viewport content space gets pushed vertically below anything in the left menu - this is the major problem that I cannot get round.

It is very important that wide content (images, tables, etc.) be accomodated in my design and that it remains flush underneath the header with horizontal scrolling as needed. Currently clients with low-res (800x600) just think they've hit a blank page.

It is obviously a much better starting point than any of my previous attempts though.

I can almost acheive the required effect with absolute positioning but then the footer seems to go wherever it feels like. I don't really want to use JS to position the footer, I'd rather use a simple table.

Maybe I could use some overflow property on the content section (not tried this yet) - but I would definately prefer the default horizontal slider of the browser.

I'm mostly looking for a definitive answer as to whether this is possible using CSS.

Thanks again,
HEX.

**Paul O'B** · Sep 29, 2004 06:49

Hi,

Thanks for the link pacman

but I don't think Hextac is looking for something that complicated anyway.

It seems to me as though he;s just looking for this basic layout.

Code:

<!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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#header{background:yellow}
#left {
 width:150px;
 background:red;
 float:left;
}
#content {margin-left:150px;background:green;}
#footer{clear:both;background:blue}
</style>
</head>
<body>
<h1 id="header">Header</h1>
<div id="left"> 
  <p>Left</p>
  <p>Left</p>
  <p>Left</p>
</div>
<div id="content"> 
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>
<div id="footer">Footer</div>
</body>
</html>

The content is kept clear of the menu by specifying a margin-left (couldn't be simpler).

Originally Posted by hextac

I thought CSS was supposed to make design easy

Who told you that

CSS is very powerful but does have rules that have to be learned thorougly before you can say its easy. Unlike tables, css covers a wide varierty of techniques to perform different tasks all with their own sets of rules.

Once you have applied the css and created the layout then controlling the design becomes easier compared to table layouts etc. Changing the look and layout of the site becomes easy as you can change ons css file instead of maybe hundreds of html page etc.

Paul

**HEXtaC** · Sep 29, 2004 07:15

Cheers Paul,

That works pretty well in firefox (some strangeness with the background-color ending at screen-width), and is almost identical to one (of the 40 or so) things I've already tried but IE still does the usual - pushes the main content down the screen until after the left content.

The weird thing is that only the actual object (eg image, table) that is wider than the screen gets forced down. Any preceding text that fits in the remaining viewport space remains (as wanted) flush with the bottom of the header.

Maybe there a simple hack for IE to stop it, or am I overlooking some necessary CSS in the image/table?

Thanks,
HEX

**Paul O'B** · Sep 29, 2004 08:26

Maybe there a simple hack for IE to stop it, or am I overlooking some necessary CSS in the image/table?

I'm going to need to see some code to see what you are ectually doing.

In my examle the content is alongside and level with the left menu. The only reason it will be drop is if you put an element into the content that is wider than the available space such as a large image or table.

I'll need to see your code to give you an answer one way or the other. If its the float dropping because of a large image then theres a couple of things you can try but I will need to see the code to advise

Paul

**HEXtaC** · Sep 29, 2004 09:41

Paul,

Sorry it took so long, maybe my initial post wasn't clear enough. The major problem stems from a content element larger than the available screen (after the leftmenu).

On IE (at least - I havent got past Firefox and IE yet) a wide element like a picture or table will be pushed below all content in the left menu. Using most methods of float-based 2-Column layouts. If I use absolute positioning I can get it to work(ish) but the footer goes all over the place.

You can replicate the situation using your previous example just place a short sentence of normal text in the "content" div, then immediately following that place a huge image or table (maybe make the leftMenu content a bit larger too)

eg.

Code:

<div id="content"> 
<p>blah blah blah</p>
<img src="/image/image.gif" width="2000" />
</div>

The picture will be pushed until level with the base of the left content.

Even stranger is that sometimes the "blah blah blah" will disappear (in IE again)... But thats another problem.

Cheers,
HEX.

**Paul O'B** · Sep 29, 2004 10:44

Hi,

I think you are talking about ie/s float drop problem.

When the content is too large then ie will try and find room underneath the adjacent content. However if there is a mrgin set then it has nowhere to go and just sits there below the left column but still to the side. Other browsers are not so stupid.

If you have a look at the FAQ on floats then there is a solution you can try that works in some cases. Or you can use a more complicated method as below which changes the source order with a couple of nestings and avooids the problem.

Here's an example although its not for the faint hearted.

http://www.pmob.co.uk/temp/2colum_so...der_image3.htm

Of course you can simplify it if you don't want the equalising columns and 100% footer etc.

Hope that helps anyway.

Paul

**HEXtaC** · Sep 29, 2004 11:24

Paul,

Thanks for all your help - its a bit late here now (1:30 AM) so I'll try what you suggest tomorrow.

I'll post any findings & conclusions here after that.

Thanks again,

HEX.

User Tag List

Thread: Simple 2-Col layout problems...

Thread Tools

Display

Simple 2-Col layout problems...

Has the same problem...

Almost...

Thanks

Bookmarks

Bookmarks

Posting Permissions