PDA

View Full Version : 3 columns, liquid but with imges.

whackaxe
07-14-2003, 07:48 PM
basicly what i have is a logo at the top (which can be of various sizes so no absolute positioning from the top please) then underneath that i have another image wich is of the same width.

BUT! (here coems the prob) i want two divs either side of the image that fill up all the rest of the width left.

without using a single table, how do i do that?
ReadMe.txt
07-14-2003, 07:57 PM
the quick answer would be, use a single table. I dont see why you need two divs on either side, this should work:

<div align="center">
<div width=" any fixed width ">
content, blah blah
</div>
</div>
whackaxe
07-14-2003, 08:10 PM
eh? i said WITHOUT using a single table. and i need three serperate divs. the middle one having a fixed width and the other two taking up whats left. and all one the same line. that is one thing i can never get in CSS: HOW TO HAVE SUCEEDINGS DIVS WITHOUT A ù*$^*!:'(-ç_'é'à LINE BREAK! its driving me uts. litteraly.
Catman
07-14-2003, 08:18 PM
I think the approach I outline in this thread (http://www.codingforums.com/showthread.php?s=&threadid=23193) might help. In short, float the left and right divs, and let all of the divs take the width of their content.
whackaxe
07-14-2003, 08:27 PM
thnx, the divs are in the right place but the right one has decided its going to line break :s
whackaxe
07-14-2003, 08:35 PM
and as far as i know, DIVs are supposed to be, by default, as wide as their content. my centeral div is taking 100%. im seriously starting to loose any respect for css i had in the past
ronaldb66
07-15-2003, 08:52 AM
im seriously starting to loose any respect for css i had in the past Don't; instead, lose respect in your ability to implement it :D
Is your center div in the normal flow? If so, it should work as stated, unless the content forces it to be that wide, or a specific width is specified.
If all else fails you could give it left and right margins wide enough to fit the left and right floated divs, but without a look at your code, both HTML and CSS, it's difficult to say anything conclusive.
whackaxe
07-15-2003, 12:16 PM
got the right div to not break, but the center div is just eating up the screen with the word "hello" :s naywyas heres the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>no title</title>
</head>

<body>


<div align="center"><img src="images/logo.png"></div>

<div style="border: 1px green solid; float: left;">hello</div>

<div style="border: 1px green solid; float: right">bye</div>

<div style="border: 1px red solid;">help</div>



</body>
</html>
Roy Sinclair
07-15-2003, 03:39 PM
I see the right behavior. Since you didn't give them explicit sizes the left and right hand floated elements use only as much space as they need for their content. The center div behaves exactly like a div should which is to use all the available space (divs default to width 100%).

Specifically, I'm seeing the Green divs on the left and the right plus the red div filling the space between them.
theabyss
07-15-2003, 03:39 PM
whackaxe
<div style="border: 1px green solid; float: left;">hello</div>


Instead of just "hello" in the box, try copy and pasting and put "hello hello hello..." etc. Put a long line of them, because I remember when I was *gulp* using the nowrap attribute on table cells :eek:, and the left most cell was too big. I put more text in and everything was great. That might be your problem with the layout your using. As long as you don't use tables ;)

<?edit:msg?>
Fixed typo
whackaxe
07-15-2003, 05:42 PM
oh ok. i thought that a divs height and width defaulted to their content. oh well. ive now got another layout to do, much more complex AND in CSS. i think im going to cry...
bradyj
07-15-2003, 05:49 PM
I just wanted to give you some 3 column CSS links I thought would help, they've helped me in the long run:
http://www.glish.com/css/2.asp (the three column one)
http://www.glish.com/css/ (the full layout selection)
http://www.webreference.com/authoring/style/sheets/layout/advanced/ (this one is cool -- a step by steop method to rebuild a table based site into a CSS site)