1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Question regarding fuild 3 column design, with fixed width on the center column

Discussion in 'CSS' started by LordXenu, Mar 5, 2008.

0
  1. #1
    Alright, I'm trying to work on a design in which the middle column has a fixed width and remains centered, while the columns to either side of that width stretch to fill the remaining width on the browser. Does anyone know how to do this? I can do it easily enough on a 2 column design, but everything I try to setup fails to work for me. the right side column always winds up floating down below the other two. Any ideas, I'm getting really frustrated with this here.

    if somebody can get this working fo rme i'd be willing to paypal them a few bucks...
     
    LordXenu, Mar 5, 2008 IP
  2. roseau

    roseau Peon

    Messages:
    266
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Because I can't see your style sheet, I am not positive but normally when one or two columns drop down below the other columns, it is because the widths do not add up mathematically.

    For instance, if your theme is 850 width but when you add up the 3 columns together, it comes to 851 or higher, the one column will drop below.

    Also, if you have used borders in your columns, they will factor into the equation as well, meaning that they have to be added on to the total.
     
    roseau, Mar 5, 2008 IP
  3. LordXenu

    LordXenu Active Member

    Messages:
    313
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #3
    i understand the width issue, but the problem i'm facing here is that i need one fixed width column in between two resizeable columns, which i just can't figure out, and i'm not sure how the play the left and right columns off the fixed width of the center column on a 100% width page.
     
    LordXenu, Mar 5, 2008 IP
  4. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #4
    Set short columns to width: % and the fixed width to its width. All should be float:left. Here's the CSS. Put a real doctype on there and make it a real page. This is just an example.

    
<html>
<head>
<style>
.sidebar {
width: 25%;
height: 40%;
border: black solid 1px;
float:left;
margin-left: 1em;
}
.content {
width: 400px;
height: 40%;
border: black solid 1px;
float:left;
margin-left: 1em;
}
</style>
</head>
<body>
<div class="sidebar">

</div>

<div class="content">

</div>

<div class="sidebar">

</div>

</body>
</html>
    Code (markup):
     
    shallowink, Mar 5, 2008 IP
  5. LordXenu

    LordXenu Active Member

    Messages:
    313
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #5
    thats pretty close to what i worked out on my own, but it doesn't seem to serve the necessary purpose. i need the center column to remain centered. http://home.live.com/?mkt=en-ca is the perfect example, but i can't seem to narrow down the code to figure out how to get this type of setup.
     
    LordXenu, Mar 5, 2008 IP
  6. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #6
    shallowink, Mar 5, 2008 IP
  7. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I think this will probably get you pretty darn close.

    http://blog.html.it/layoutgala/

    Look at example 1. You would probably need to put another div inside the center container and give it a fixed width.

    If that doesn't give you the result you want, then you will probably be best off going with a table (though I hate to do it). Personally, if I can't get the design I want with a tableless layout, I usually change the site design. I just hate maintaining sites that use tables.
     
    ChaosFoo, Mar 6, 2008 IP
  8. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Couldn't a wrapper div work?

    
#wrapper {
  width: 90%;
  position: absolute; 
}
    Code (markup):
    Something along those lines with content and two sidebars inside? Forgive me if im wrong, new to the css business. :p
     
    X.Homer.X, Mar 6, 2008 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #9
    The wrapper part would. The absolute positioning generally wouldn't, because where that wrapper's sitting on the page would need to change depending on screen width. With your above example, you didn't say where it's positioned, so the default is 0 0 (top left). That means you'll always have this 10% of nothing on the right side (tho if the body background is the same colour as that right column, it might not be really noticable...)

    Three left floats gives the flexibility needed. The tables start coming in when these three need to be 100% height. CSS can do the widths no problem. It's heights... and since the two sides are variable in width, it would be difficult (tho I don't think impossible) to do faux columns to simulate 100% height.

    It wouldn't work in IE but for fun you could try display: table and use the others too (display: table-row, display: table-cell). That would be interesting.
     
    Stomme poes, Mar 7, 2008 IP
  10. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #10
    haha stomme, i was just saying position absolute because it just put more into it. i meant like center it, but i couldnt look up all the center stuff that i have mine to center because i was posting on my wii.

    [offtopic]
    I am having a similar problem, except with 2 columns, stomme i sent you a pm, if you dont feel like doing anything to it dont worry, but i was just wondering since you were so helpful last time :)[/offtopic]
     
    X.Homer.X, Mar 8, 2008 IP