...

View Full Version : How do I position these boxes? Now resolved.



effpeetee
02-22-2008, 04:14 PM
How do I position these boxes so that the horizontal box is next to the vertical one. Like a cross laid on its side.:confused:

Still trying hard to understand css.

http://exitfegs.co.uk/aboxes.html

Frank

jcdevelopment
02-22-2008, 04:18 PM
<style type="text/css">

*{margin:0;
padding:0;}

html,body{height:100&#37;;
width:100%;}

#VBox {border: solid #000000 5px;
background-color: red;
padding: 5px 20px;
width: 10%;
margin-left:1%;
color: blue;
float:left;
clear:left;
}
#HBox {
margin-top:75px;
border: solid #000000 5px;
background-color: blue;
padding: 5px 20px;
margin:1%;
width: 80%;
color: white;
}


try that and see what happens

Aceramic
02-22-2008, 04:19 PM
#VBox {border: solid #000000 5px;
background-color: red;
padding: 5px 20px;
width: 10&#37;;
margin-left:1%;
color: blue;
float:left;
}
#HBox {
float:right;
border: solid #000000 5px;
background-color: blue;
padding: 5px 20px;
margin:1%;
width: 80%;
color: white;
}

I think that should fix it.

effpeetee
02-22-2008, 05:32 PM
Thanks to both. Both worked OK. I must try to understand why though. I am still getting by, by using other peoples code that works and copying it.
This was an attempt to do it myself.

Ah well! back to the drawing board. Anyone know where I can get a replacement for my 82 year old brain?

Frank

Aceramic
02-22-2008, 05:40 PM
*opens head* Here, try mine. It might not be an upgrade, though. ;)


As for why my example works, the only thing I changed was adding the float:left. In your code, you set the horizontal box to float:right (which it did), but did not assign a position to the vertical box, so it was automatically positioned directly below the previous element. Assigning the float:left positioned it next to the other floated element.



With all that said, I think I just confused myself, I hope it makes sense to you. :)

effpeetee
02-22-2008, 05:47 PM
*opens head* Here, try mine. It might not be an upgrade, though. ;)


As for why my example works, the only thing I changed was adding the float:left. In your code, you set the horizontal box to float:right (which it did), but did not assign a position to the vertical box, so it was automatically positioned directly below the previous element. Assigning the float:left positioned it next to the other floated element.



With all that said, I think I just confused myself, I hope it makes sense to you. :)
Thanks, the explanation helps a lot. It is something that I didn't think of.
It's funny. When I was at college, before the war, among other things I learned the formula to solve a quadratic equation. Also the trigonmetric ratios. I have never had occasion to use either since then, but I have never forgotten them. Now I can't even remember what I was going to write next================?

Regards,

Frank

PS I still remember my RAF number 3030279, Taylor F P

Aceramic
02-22-2008, 05:54 PM
Amazing how our minds (don't) work, isn't it? :)

effpeetee
02-22-2008, 05:56 PM
AMEN to that



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum