13 replies [Last post]
Gravesent
Gravesent's picture
Offline
Enthusiast
Bucharest - Romania
Last seen: 8 years 19 weeks ago
Bucharest - Romania
Timezone: GMT+3
Joined: 2007-03-23
Posts: 71
Points: 32

Hello,

I can make a 3 column fixed width css layout, using fixed widths, float and clear both that's not a problem. By using widths like 30% I can even make the layout expand horizontally but what do I do if I only want one column to expand?

Basically I have 3 columns, the menu column, the advertising column and the content column, while I want the menu and advertising columns to keep their width when the width of the entire site changes, I want the content column to fill up the space.

No matter how I try to do this it doesn't work, if I don't add any width parameter to the div that's supposed to stretch it only gets as wide as the content inside it. If I give it 100% it fills up the entire available space and moves the other columns under it.

I can do this with tables very easily, just set the width to the two columns that I want to keep the same and the other column just stretches to fill the empty space. Can this be done with CSS?

Thank you for your time.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

http://blog.html.it/layoutgal

Gravesent
Gravesent's picture
Offline
Enthusiast
Bucharest - Romania
Last seen: 8 years 19 weeks ago
Bucharest - Romania
Timezone: GMT+3
Joined: 2007-03-23
Posts: 71
Points: 32

Wow, thanks a lot, that page

Wow, thanks a lot, that page is gold mine. I never thought css can be tricked into doing things like that, if I get this right an element floats in the space left by the margin of another?

I got it working but a deep understanding of things doesn't hurt.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

Yeah, sorry I was so

Yeah, sorry I was so succinct. It's my thing. I can't help it.

Floating will remove an item from the normal document flow. So yeah, margins can be used to compensate for a floated column's real estate. I'm sure someone smart can explain it better than I could. Smile

Gravesent
Gravesent's picture
Offline
Enthusiast
Bucharest - Romania
Last seen: 8 years 19 weeks ago
Bucharest - Romania
Timezone: GMT+3
Joined: 2007-03-23
Posts: 71
Points: 32

Thanks, I think I get it.

Thanks, I think I get it. While I was really happy with myself for managing to implement this solution a friend of mine came up with another.

Much shorter and less complicated it uses lists.

Now I know what your thinking, if I go ahead and use lists I might as well use tables instead, it's still an HTML element that's not being used as it was meant to.

But other than that, is there any other good reason for not using the solution below? I kind of want to stick to what I built earlier (with divs and negative margins), I just don't like this list thing, it's weird. I am however the kind of person to think outside the box so if there's nothing wrong with the list layout I'm inclined to use it. The objective is simple / cross browser compatible / fast.

I've had this dilemma for quite some time, to use or not to use strange code in order to make a site better. In this case it gets even worst, the "standard" way of doing it is pretty damn strange.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
*{
    margin:0;
    padding:0;
}
ul{
    display: table;
    width:70%;
    margin: 20px auto;
}
li#d1, li#d3{
    width:200px;
}
ul li{   
    position: relative;
    display: table-cell; 
}
ul li div{
    height:500px;
    border:1px solid #ccc;
}
li#d1 div{
    margin-right: 20px;
}
li#d3 div{
    margin-left: 20px;
}
 
</style>    
</head><body>
<ul>
    <li id='d1'>
        <div>asd</div>
    </li>
    <li id='d2'>
        <div>asd</div>
    </li>
    <li id='d3'>
        <div>asd</div>
    </li>
</ul>
</body></html>

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

That just makes no sense. If

That just makes no sense. If there are divs inside of the list items then just style the divs and leave the list out completely. It's totally extraneous.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

That layout reminds me of one

That layout reminds me of one that was demonstrated as an exercise years ago, attempting to show how a site structure could be fashioned from lists alone, this appears a vague copy of that. I wouldn't take this approach, go with what the majority of layouts work on with divs as the major structural aggregating containers for site sections (or get funky and look at html5's approach to structuring)

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Gravesent
Gravesent's picture
Offline
Enthusiast
Bucharest - Romania
Last seen: 8 years 19 weeks ago
Bucharest - Romania
Timezone: GMT+3
Joined: 2007-03-23
Posts: 71
Points: 32

It's his website and he won't

It's his website and he won't budge Sad

programmers...

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

Gravesent wrote: It's his

Gravesent wrote:

It's his website and he won't budge Sad

programmers...

Even when they're wrong, they're right. Tongue

Gravesent
Gravesent's picture
Offline
Enthusiast
Bucharest - Romania
Last seen: 8 years 19 weeks ago
Bucharest - Romania
Timezone: GMT+3
Joined: 2007-03-23
Posts: 71
Points: 32

We came to some middle ground

We came to some middle ground and I do have to say I like it, it's simple, flexible and taking out eider the left or right column (which might happen on some pages) works without any change to the css:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
 
*{
    margin:0;
    padding:0;
}
 
div#main-content{
    display: table;
	width:70%;
	vertical-align:top;
}
div#sidebar, div#content, div#adverts{
    display: table-cell;
	vertical-align:top;
}
div#sidebar {
    width: 200px;
	padding-right:15px;
	background-color:#993;
}
 
div#adverts {
    width:120px;
	padding-left:15px;
	background-color:#009;
}
 
</style>    
</head><body>
<div id="main-content">
    <div id="sidebar">
       Sidebar
         <br>
         <br>
         <br>
         <br>
         <br>
         <br>
         <br>
         <br>
         <br>
         <br>
         <br>
         <br>
  </div>
    <div id="content">
        Content
</div>
    <div id="adverts">
        Add
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
  </div>
</div>
</body></html>

EDITED, PASTED WRONG CODE INITIALLY

So yeah, it would appear they kind of are right Smile

I'm keeping a web server running on my pc so if it's not turned off you can see the actual site I'm working on: Nameless price compare website

I'm sure I messed something else up so any criticism is welcomed. (round corners are not yet supposed to work on IE and many background images will be put in the same image file)

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Programmers should be locked

Programmers should be locked in broom cupboards and not allowed out Crazy definitely shouldn't be allowed anywhere near frontend site development, god save us from programmers! I'll let them do some controller stuff as long as they keep it tightly locked away in a file somewhere, they can then give me some nice template tags or class functions/objects to use where the real work begins Big smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Be careful with the

Be careful with the display:table family of properties they have not enjoyed full browser support in a few browsers. I tend not to like the set of properties and tend to be suspicious of their reason for existence and think they ought to be locked in the broom cupboard along with the programmers

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Gravesent
Gravesent's picture
Offline
Enthusiast
Bucharest - Romania
Last seen: 8 years 19 weeks ago
Bucharest - Romania
Timezone: GMT+3
Joined: 2007-03-23
Posts: 71
Points: 32

It would seem that all major

It would seem that all major browsers now support it, haven't tried IE7 though. I don't like the table styling eider but it seems to work, it is a lot simpler and I just can't argue with that evil programmer anymore Smile

I don't even care about IE6, that browser needs to die and we need to help it.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

Gravesent wrote: ... I don't

Gravesent wrote:

... I don't even care about IE6, that browser needs to die and we need to help it.

Haven't you heard? http://ie6funeral.com/