Previous Message
Next Message

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

Sent by Rob Cochrane on 14 September 2005 15:03


This is a multi-part message in MIME format.
--------------000803080304080605070502
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Content-Transfer-Encoding: 7bit

CJ Larson wrote:
> 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
> 
An image will fill a Div so no minimum height is needed. That div may be 
floated left and a div containing your text floated right I have a 
similar sample but with a form in place here:

http://www.by-rob.com/test/TwoColTemplate.htm

You can spider the CSS or link here:

http://www.by-rob.com/test/TwoColTemplate.css

> 
> 
> 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.
> 

The clearing div is there to force the containing div to wrap the 
floats. Thus you should have a fluid height as well as a fluid width and 
both floats should be on the same level unless the browser is cramped up 
really small when the order will take presedence.
> 
Rob

--------------000803080304080605070502
Content-Type: text/plain; charset="us-ascii"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit

______________________________________________________________________
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/

--------------000803080304080605070502--
Previous Message
Next Message

Message thread:

Possibly related: