5 replies to this topic

[xis]

Hey everyone. Long time.

I was wondering if there is a way for me to line up the boxes labled box 1 box 2 and box3
on this page. http://5starconcierge.com/dev/

Can't get it so it works on FF and IE or even get it to aling evenly at all for that matter.


Thanks in advance,
X

[Hayden]

#box1 {
float:left;
color:#333;
border:1px solid #ccc;
background:#F2F2E6;
width:150px;
height:150px;
margin:5px;
padding:5px;
}

#box2 {
float:right;
color:#333;
border:1px solid #ccc;
background:#F2F2E6;
width:150px;
height:150px;
margin:5px;
padding:5px;
}

#box3 {
float:right;
color:#333;
border:1px solid #ccc;
background:#F2F2E6;
width:150px;
height:150px;
margin:5px;
padding:5px;
}

<div id="box1">box 1</div>
<div id="box2">box 2</div>
<div id="box3">box 3</div>

You'll notice Box's 2 and 3 are closer to the right. Check out the 'float' variable in the CSS.

[xis]

I tried different things with the float and wasn't able to get to work. Do you know the answer?

Edited by xis, 30 March 2007 - 08:06 PM.

[Hayden]

my last post is the jest of what it is.

take what is in the first code box and paste it in between style tags and take the 2nd code box and paste it in between the body tags.

just play with left and right on float.

[Stewie]

add all of the boxes into one div container, then make the boxes left: auto and right: auto and margin: auto;

if auto doesnt work then try inherit

O but make sure that the container you put them in takes up that space that all three boxes are in, then css should automatically center them within the big box.

[xis]

Looks like I got it to work from what I can tell. Thank you both for taking the time to respond.

I ended up just tweaking the margins for the middle box and it seems to be working here's the code if anyone is interested for future reference.

CSS

#box1 {
float:left;
color:#333;
border:1px solid #ccc;
background:#F2F2E6;
width:150px;
height:150px;
margin:0 0 0 1px;
padding:5px;
}

#box2 {
float:left;
color:#333;
border:1px solid #ccc;
background:#F2F2E6;
width:150px;
height:150px;
margin:0 0 0 35px;
padding:5px;
}

#box3 {
float:right;
color:#333;
border:1px solid #ccc;
background:#F2F2E6;
width:150px;
height:150px;
margin:auto;
padding:5px;
}

HTML

<div id="box1">box 1</div>
<div id="box2">box 2</div>
<div id="box3">box 3</div>

Edited by xis, 30 March 2007 - 11:40 PM.