...

View Full Version : 3 inline horizontal boxes.... width question



niemie
03-02-2005, 08:03 PM
I am trying to get a page that has 3 boxes in a row (horizontally) with the first two having a fixed width, and my problem is getting the third one to take up the rest of width - so I don't have to specifiy a width for the third one. There is probably an easier or cleaner way to do this but this is what I have so far:

CSS:

#box1 {
width:70px;
height:120px;
text-align:right;
padding:10px;
border: 1px solid gray;
font-size:10px;
position:absolute; top:250px; left:0px;
}

#box2 {
width:70px;
height:120px;
text-align:right;
padding:10px;
border: 1px solid gray;
font-size:10px;
position:absolute; top:250px; left:97px;
}

#box3 {
width:600px; <--------(WIDTH IN QUESTION)
height:120px;
text-align:right;
padding:10px;
border: 1px solid gray;
font-size:10px;
position:absolute; top:250px; left:194px; right:0px;
}

HTML:

<body>
<div id="box1">TEST</div>
<div id="box2">TEST</div>
<div id="box3">TEST</div>
</body>

bazz
03-02-2005, 08:59 PM
I havent used tables in a while so I am a bit rusty.

Have you tried giving the table itself a width of 100%. If it's the full width of the screen, and the two cells are fixed, then perhaps the third would stretch across?

OR

have you tried putting something in the third cell and giving it margin : auto auto; attributes in your css? Thise are the first two that I would try.

hth
Bazz

rmedek
03-02-2005, 09:05 PM
Well, block level elements, by default, inherit the width of their containing element unless told otherwise. So try this:


#box3 {
width: auto /* expands to it's container, the body */
height:120px;
text-align:right;
padding:10px;
border: 1px solid gray;
font-size:10px;
position:absolute; top:250px; left:194px; right:0px;
}

Should work. Hope this helps,

niemie
03-02-2005, 09:07 PM
yeah, I tried the auto width on the 3rd box earlier and it looks perfect in firefox but in ie it is just a short little box...... any ideas?

rmedek
03-02-2005, 09:45 PM
Well, in IE the absolute positioning-- since it takes the element out of flow-- makes it impossible to use "auto". Same for if you float it. To tell the truth I'm not sure what the spec is on that, so I don't know if IE is right or wrong on this one...

I'd use a method that kept the last box "in flow," such as floating the other two boxes left:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">

#left, #box1 {
float: left;
}

#box1, #box2, #box3 {
position: relative;
top: 250px;
width:70px;
height:120px;
text-align:right;
padding:10px;
border: 1px solid gray;
font-size:10px;
}

#box3 {
width: auto;
}

</style>
</head>
<body>
<div id="left">
<p id="box1">TEST</p>
<p id="box2">TEST</p>
</div>

<p id="box3">TEST</p>
</body>
</html>

I used p instead of div just to illustrate where the containers where. Maybe this will work for you?


Auuuuugrle... never mind! This does horrible things in FF. The general idea might work, though...

niemie
03-02-2005, 09:56 PM
Hmmmmm - I tried floating the first 2 boxes left but it still looks the same (using auto for the third box width) - fine in Firefox and just a skinny third box in IE....

Any other ideas?

EDIT:

Also, and maybe this is a clue somehow but if I set the text-align property in the 3rd box to left, it shows up in Firefox the same as in IE (as a not very wide box instead of taking up the width of the rest of the page...)

rmedek
03-02-2005, 10:02 PM
Yes.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">

* {
margin: 0;
padding: 0;
}

#box1, #box2, #box3 {
position: relative;
top: 250px;
width:70px;
height:120px;
text-align:right;
padding:10px;
border: 1px solid gray;
font-size:10px;
}

#box1, #box2 {
float: left;
margin-right: 5px;
}

#box3 {
width: auto;
margin-left: 194px;
}

</style>
</head>
<body>
<p id="box1">TEST</p>
<p id="box2">TEST</p>
<p id="box3">TEST</p>
</body>
</html>

Same idea. Keep the last box "in flow," and adjust the layout with a touch of margin magic. Works in both IE and FF... IE might need a hack or two to get your pixel-perfect layout.

niemie
03-02-2005, 10:13 PM
THANKS!

Ok that basically works (althought Dreamweaver doesn't know what the hell is going on, lol) - now the only "problem" is I really don't want any margin/space between the far left of the 1st box and the far right of the 2nd box to the edge of the screen..... any work arounds you can think of? I am trying to make the whole thing flow in a straight line across the screen...does that make sense?

rmedek
03-02-2005, 10:17 PM
Have you tried, say, adjusting the margins? :rolleyes:

http://www.w3schools.com/css/css_reference.asp#margin
http://www.w3schools.com/css/css_reference.asp#padding

You've just got to play around with those numbers to make it work for you.

niemie
03-02-2005, 10:56 PM
nevermind - I just didn't see that you had already set the padding and margins to zero for the page, that works. The only trick I need to figure out is how to make the 3rd box's left margin show up the same in both IE and Firefox..... for some reason they don't count the same as far as pixels go. What works in one does not work in the other...

rmedek
03-02-2005, 11:55 PM
ahh... the freakin' glory that is IE. It's adding a 3px bump to each element (a known bug when floating... see http://www.positioniseverything.net/explorer/threepxtest.html for more). You can use various hacks to send IE its own rules; I used a little negative margin to put everything in place:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">

* {
margin: 0;
padding: 0;
}

#box1, #box2, #box3 {
position: relative;
top: 250px;
width:70px;
height:120px;
text-align:right;
padding:10px;
border: 1px solid gray;
font-size:10px;
}

#box1, #box2 {
float: left;
border-width: 1px 0 1px 1px;
}

#box3 {
width: auto;
margin-left: 182px;
}

* html #box3 {
margin-left: -3px;
}

* html #box2 {
margin-right: -3px;
}

</style>
</head>
<body>
<p id="box1">TEST</p>
<p id="box2">TEST</p>
<p id="box3">TEST</p>
</body>
</html>


I think this is the effect you're going for.

niemie
03-03-2005, 12:40 AM
man.... almost but not quite. The IE hacks make it hard to get the equal spaces in between the second and third box. I'm attaching a pic from how it looks in Firefox which is the way i want it to look in IE as well but can't quite get it too... The dark outer edges represent the edges of the browser window.

http://www.yourthreshold.com/images/Example.jpg

rmedek
03-03-2005, 09:09 AM
The IE hacks make it hard to get the equal spaces in between the second and third box.
They do?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">

* {
margin: 0;
padding: 0;
}

#box1, #box2, #box3 {
position: relative;
top: 250px;
width:70px;
height:120px;
text-align:right;
padding:10px;
border: 1px solid gray;
font-size:10px;
}

#box1, #box2 {
float: left;
margin-right: 5px;
}

#box3 {
width: auto;
margin-left: 194px;
}

* html #box3 {
margin-left: -3px;
}

* html #box2 {
margin-right: 2px;
}


</style>
</head>
<body>
<p id="box1">TEST</p>
<p id="box2">TEST</p>
<p id="box3">TEST</p>
</body>
</html>

musher
03-03-2005, 06:59 PM
niemie, thanks for making this post, I hope you dont mind a question here for rmedek or one of the other guys.

rmedek
Great example thanks, i've been looking at other examples of this, and yours finaly turned on the light bulb. :thumbsup: To take your example one step further how would you set it up with non-static heights, but all boxes would have the same height.
IE below: box one has background color only 1 line of text, box 3 has 12 lines of text (which can vary). And set it up so box 1 has same height as box 3.

I hope this makes sense.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">

* {
margin: 0;
padding: 0;
}

#box1, #box2, #box3 {
position: relative;
top: 10px;
width:70px;
height:120px;
text-align:right;
padding:0px;
border: 1px solid gray;
font-size:10px;
}

#box1, #box2 {
float: left;
margin-right: 5px;
}

#box1 {
background-color: green;
}

#box2 {
background-color: yellow;
}

#box3 {
width: auto;
margin-left: 194px;
background-color: red;
}

* html #box3 {
margin-left: -3px;
}

* html #box2 {
margin-right: 2px;
}


</style>
</head>
<body>
<p id="box1">TEST</p>
<p id="box2">TEST</p>
<p id="box3">
<br>line1<br>line2<br>line3<br>line5<br>line6<br>line7<br>line8<br>line9<br>line10<br>line11</p>
</body>
</html>

niemie
03-03-2005, 07:38 PM
Well I got it up and it works (code below) - I guess I am having trouble figuring out when something is a glitch in IE....

I know have a "logo" class I am going to place text in inside the 3rd box, but the space between the text and the colored boxes inside the third box differs between IE and Firefox. I want to do this the right way, and it looks like I want it to in IE as far as the spacing between the text and the colored boxes, but there is extra space in Firefox.....



CSS:

body {
margin:0;
padding:0;
background-color:#454444;
}

#wrapper {
float:left;
width:100%;
margin-top:245px;
}

#b1, #b2, #b3 {
height:150px;
border:1px solid;
border-color: rgb( 86, 84, 84);
margin:5px 0;
background-color:#403C3C;
}

#b1, #b2 {
width:80px;
float:left;
margin-right:5px;
}

#b1 {
border-left:0;
}

#b3 {
border-right:0;
margin-left:173px; /*This line changes the 3rd box spacing in Firefox - beware!!*/
}

* html #b2 {
margin-right:2px;
}

* html #b3 {
margin-left:0;
}

#orange, #purple, #green {
position: absolute;
top: 270px;
width:35px;
height:35px;
border: 1px solid;
border-color:#222222;
font-size:9px;
}

#orange {
left: 375px;
background-color:#DB7B4C;
}

#purple {
left: 417px;
background-color:#a3a2ca;
}

#green {
left: 459px;
background-color:#A8A857;
}

#logo {
position: absolute;
top: 315px;
left: 190px;
width:305px;
height:75px;
text-align:right;
}

.concepts {
font-family: Verdana, Arial, sans-serif;
font-size:21px;
font-stretch:ultra-condensed;
font-weight:bold;
color:#888888;
}



HTML:

<div id="wrapper">

<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
<div id="orange"></div>
<div id="purple"></div>
<div id="green"></div>
<div id="logo"><h1 class="concepts">Logo Text Here</h1></div>

</div>

rmedek
03-03-2005, 10:09 PM
niemie, thanks for making this post, I hope you dont mind a question here for rmedek or one of the other guys.

rmedek
Great example thanks, i've been looking at other examples of this, and yours finaly turned on the light bulb. :thumbsup: To take your example one step further how would you set it up with non-static heights, but all boxes would have the same height.
IE below: box one has background color only 1 line of text, box 3 has 12 lines of text (which can vary). And set it up so box 1 has same height as box 3.

I hope this makes sense.

Well, you can't. Not really. I mean, the first thing you would do is change the paragraphs in my example to divs, then put your paragraphs, lists, whatever, in each div.

So that keeps everything semantic (sort of) and enclosed, but block-level elements expand to the height of their content. One of the drawbacks off CSS is that it gets hard to emulate table-type layout like this. There are a few workarounds-- using background images to emulate columns (http://alistapart.com/articles/fauxcolumns/), using background colors (http://richardmedek.com/temp/example6.htm), even using extra-wide borders and such. There are a few hacks to use (display:table-cell; min-height), but they're not very cross-browser friendly.

Good luck... :)

rmedek
03-03-2005, 10:19 PM
Well I got it up and it works (code below) - I guess I am having trouble figuring out when something is a glitch in IE....

I know have a "logo" class I am going to place text in inside the 3rd box, but the space between the text and the colored boxes inside the third box differs between IE and Firefox. I want to do this the right way, and it looks like I want it to in IE as far as the spacing between the text and the colored boxes, but there is extra space in Firefox.....
That's because IE and Firefox have different default padding and margin for header elements (well, everything, really).

Use Andrew K.'s patented global white-space reset and say good bye to these troubles:


* {
margin: 0;
padding: 0;
}

If you don't want to do that then just make sure you add the proper margins and padding to every element that has different spacing in browsers.

Check out http://www.positioniseverything.net/ for a decent list of the more popular positioning techniques and IE bugs. You also might want to Google for "CSS page flow" or something to get a handle on the box model, page flow, etc, of elements in HTML/CSS.

Almost forgot this one, found it on another post: http://www.brainjar.com/css/positioning/default.asp

musher
03-03-2005, 10:54 PM
Thanks, Richard
Both links (plus ones for niemie) were a great help.

Now I'm a BOX MODEL fool........ well ok a box model beginner then !! :rolleyes:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum