Previous Message
Next Message

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

Sent by Rob Cochrane on 13 September 2005 06:06


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

CJ Larson wrote:

> [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.
> 
> 
> [Style 2] (Logo centered between page margins, text right aligned,
> without the right text moving the image to the left)
> ------------------------------------------------------------
>                     +------------------+           login/out
>                     |       LOGO       |                name
>                     +------------------+
> 
> 
In the above case the items on the right may need to be taken out of the 
flow and positioned absolutely.I would contain both elements in a single 
div. The logo can then be given left and right margins as auto and will 
center. If the page is not intended to be fluid then playing with 
margins will archive the desired effect without resulting to absolute 
positioning which IMHO is not the greatest.

I am sure some of the masters of CSS on this list have more elegant 
solutions.

Rob

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

--------------010901070602040602050005--
Previous Message
Next Message

Message thread:

Possibly related: