Page 1 of 1

CSS for liquid header with minimum width

Posted: Fri Mar 14, 2008 11:41 am
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.

Re: CSS for liquid header with minimum width

Posted: Fri Mar 14, 2008 2:18 pm
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>

Re: CSS for liquid header with minimum width

Posted: Tue Mar 18, 2008 11:16 am
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.

Re: CSS for liquid header with minimum width

Posted: Wed Mar 19, 2008 12:17 am
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.

Re: CSS for liquid header with minimum width

Posted: Wed Mar 19, 2008 4:49 am
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.

Re: CSS for liquid header with minimum width

Posted: Wed Mar 19, 2008 1:28 pm
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.

Re: CSS for liquid header with minimum width

Posted: Wed Mar 19, 2008 2:50 pm
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.

Re: CSS for liquid header with minimum width

Posted: Wed Mar 19, 2008 3:01 pm
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.

Re: CSS for liquid header with minimum width

Posted: Wed Mar 19, 2008 3:32 pm
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.

Re: CSS for liquid header with minimum width

Posted: Wed Mar 19, 2008 3:37 pm
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.