CSS for liquid header with minimum width

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
ska
Forum Commoner
Posts: 41
Joined: Mon Sep 05, 2005 4:54 pm

CSS for liquid header with minimum width

Post by ska »

Hello all. I use CSS for all my layouts, but there's one thing that I've never been able to work our an elegant solution for. How do I achieve the layout using tables shown below using CSS only;

Code: Select all

 
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="right">
    <table width="1000" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="right"><img src="../images/admin/logo.jpg" alt="logo" /></td>
      </tr>
    </table>
    </td>
  </tr>
</table>
 
So you'll see an element, in this case the logo, at the far right hand side which will contract as the window is made smaller until the window is 1000px wide, after which the logo doesn't go any further and horizontal scroll bars appear. So a 100% div but with a minimum width specified. And yes, it has to work in IE...

Any ideas?

Thanks.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: CSS for liquid header with minimum width

Post by pickle »

All the styles necessary are already in your code, it just takes a change in thinking to realize it. All the cellspacing/cellpadding/border declarations can go away. Your outer table, if turned into a div, is implicitly 100% wide. Your align=right declarations can be moved into CSS, as can your width. The only new thing is float:right on the inner div & a declaration of the height.

Code: Select all

<div style = "text-align:right;height:[height of logo]px">
    <div style = "float:right;width:1000px;">
        <img src="../images/admin/logo.jpg" alt="logo" />
    </div>
</div>
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
ska
Forum Commoner
Posts: 41
Joined: Mon Sep 05, 2005 4:54 pm

Re: CSS for liquid header with minimum width

Post by ska »

Thanks, that works. Sure I tried it before though! I think perhaps I tried it with an absolutely positioned wrapper and that somehow didn't work. Your version is fine though, cheers.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: CSS for liquid header with minimum width

Post by JAB Creations »

To achieve true liquid CSS1 you must never apply borders, margins, and or padding to the parent element, only width. To give padding to the parent you don't actually give the parent padding, instead you give it's first child margins. Repeat for all parent/child elements.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: CSS for liquid header with minimum width

Post by matthijs »

JAB Creations wrote:To achieve true liquid CSS1 you must never apply borders, margins, and or padding to the parent element, only width.
Not sure what you're talking about. It's perfectly fine to apply both a width, borders, margins and/or paddings to an element and have it fluid.

Maybe you'd have to deal with some box-model bugs in some ancient pre-historic browsers, if you're so unlucky you have to support those, but that's another story.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: CSS for liquid header with minimum width

Post by JAB Creations »

No matthijs, that is not liquid CSS1. Visit my site, resize your browser, and watch the label/input/buttons/sidebar/content all resize.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: CSS for liquid header with minimum width

Post by matthijs »

Code: Select all

 
#element {
 width:70%;
 margin:10%;
 padding:5%;
}
 
That's liquid ..

p.s. I tried to visit your site, but got halted by some splash page with 100 options to choose from.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: CSS for liquid header with minimum width

Post by JAB Creations »

Well I'll give it to you though it's only a very simple layout that can be achieved with that approach.

I didn't ask for a design critique, I only mentioned my site as a an example of an advanced liquid layout.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: CSS for liquid header with minimum width

Post by matthijs »

I only want to clarify to the original poster ska or another reader that your statement
to achieve true liquid CSS1 you must never apply borders, margins, and or padding to the parent element, only width
is not true.

I don't see how only simple layouts would be possible if you apply more then width.

And I didn't mean to critique any design, sorry if that came across. I did want to look and I did get stopped.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: CSS for liquid header with minimum width

Post by JAB Creations »

The entrance only asks you if you use broadband or dialup....and each choice lets you enable or disable music.

Or simply click this link...
http://www.jabcreations.com/home/home-news.php

The layout you're speaking about doesn't take borders in to consideration. I haven't seen anyone use anything like border-width: 1%; because even then you'd end up with 10pixel borders on both sides @ 1024x768 for example. So I'm taking borders in to consideration whereas your layout doesn't utilize borders.

So having pixel-perfect control over a liquid layout would require the approach I mentioned. If you're making minor changes in background-color it's different though and I can visualize a layout with background-colors versus borders to make each section of the page distinct.
Post Reply