Previous Message
Next Message

Is it possible to create this type of a layout with CSS?

Sent by CJ Larson on 14 September 2005 16:04


The problem with floating the text to the right is that it falls below
the header.  It jumps right on top of my main content area underneath
the header section, where you see the "xxx" to represent unreadable
text.

[logo not floated, right text floated]
------------------------------------------------------------
+------------------+
|       LOGO       |
+------------------+
                                                   xxxxxxxxx
                                                   xxxxxxxxx



I can't set a min-height because I don't know the height of the logo.
Also, if I float the logo, it no longer sets a height for the header.
This is where the clearing div would come in, which I was hoping to
avoid by not floating the header.


> This is still significantly less code than you would use with tables.

Hehe.  That's the kicker.  I could do the above in 4 table cells.  With
CSS I have to have various floating and positioning code, 3 <divs> with
unique classes, AND a blank clearing div.  Don't get me wrong - I'm not
advocating tables!  I'm merely pointing out that tables (imo) are a heck
of a lot easier than CSS to lay out when dealing with things like this
for the non-experts.

Advice much appreciated, and thank you.  :)  Any other ideas someone
might be able to toss my way?


-----Original Message-----
From: Rob Cochrane [EMAIL-REMOVED]] 
> [Style 1] (Logo on left, text right aligned)
> ------------------------------------------------------------
> +------------------+                               login/out
> |       LOGO       |                                    name
> +------------------+
> 
Images are inline and will force the height for the div. The alternate 
is to set a minimum height but this is not supported by all browsers.
Some method of clearing the containing div is required if you are 
containing floated elements.
This is still significantly less code than you would use with tables.
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: