₦airaland Forum

What is the html code to make
horizontal boxes i need to make
some boxes go from left to
right but all i can find is on top
of each other, you can see
example here <a href="http://
www.car
insurancequotesinformation.
com&quot;>car insurance
quotes</a> where the boxes
are next to each other, and will
this affect the page width on
my site.
Someone told me use DIV tags
but how do i put this in HTML
code?.

Maybe something like this (I am using inline CSS but in your code, add this to a CSS files):

<div style="float: left; width: 300px;border: 1px solid red;">content for DIV 1</div>
<div style="float: left; width: 300px;border: 1px solid red;">content for DIV 2</div>
<div style="float: left; width: 300px;border: 1px solid red;">content for DIV 3</div>
<br style="clear: both;" />

Note:
1) The widths could be anything you want it to be, and not necessarily 300px
2) I am only adding the border color for visualization purposes
3) You always want to "clear" floated elements so that flow returns to the page

Good luck!

muktar9: What is the html code to make
horizontal boxes i need to make
some boxes go from left to
right but all i can find is on top
of each other, you can see
example here <a href="http://
www.car
insurancequotesinformation.
com&quot;>car insurance
quotes</a> where the boxes
are next to each other, and will
this affect the page width on
my site.
Someone told me use DIV tags
but how do i put this in HTML
code?.

This looks like position: relative

It does not look like float as explained by yawa-ti-de...Float always has to do with 2 boxes( width,height), you can either float a box to left or right.

You can do this:

Selector
{
position: relative;
width: ..px;
height: ..px; <!-- .. indicates you insert your desired number -->
border: 1px solid black;
border radius: px <!-- This is if you want to make it specific -->

}

Go over google and look up

relative position, absolute position, fixed position, etc Other keyword to add is css

^^^Hmmm, I would be careful about positioning stuff. Besides, if you want to do position relative, you may still need your "top/bottom" and "left/right" attributes, no?

maninmood: This looks like position: relative

It does not look like float as explained by yawa-ti-de...Float always has to do with 2 boxes( width,height), you can either float a box to left or right.

You can do this:

Selector
{
position: relative;
width: ..px;
height: ..px; <!-- .. indicates you insert your desired number -->
border: 1px solid black;
border radius: px <!-- This is if you want to make it specific -->

}

Go over google and look up

relative position, absolute position, fixed position, etc Other keyword to add is css

i totally disagree white you, not that you cant do it with positioning but that you cant achieve that with a float attribute....you can float as many divs as possible not just two divs.

take this example.

if you have a container with width="600px";
and you have 6 divs with width="100px";
(i am just going to neglect the margins here)
floating the 6 of the divs either left or right will give you a horizontally displayed divs. i told you i neglected the margins of the divs and with mind that the contain has padding="0px";

so i go with yawa-ti-de mind you i am still learning

adewasco2k: i totally disagree white you, not that you cant do it with positioning but that you cant achieve that with a float attribute....you can float as many divs as possible not just two divs.

take this example.

if you have a container with width="600px";
and you have 6 divs with width="100px";
(i am just going to neglect the margins here)
floating the 6 of the divs either left or right will give you a horizontally displayed divs. i told you i neglected the margins of the divs and with mind that the contain has padding="0px";

so i go with yawa-ti-de mind you i am still learning

You and Yawatide are totally right on this. Getting the boxes line up horizontally, has nothing to do with relative positioning.

soloqy: You and Yawatide are totally right on this. Getting the boxes line up horizontally, has nothing to do with relative positioning.

You can fix it with relative positioning, inline-block,etc. HTML is dumb, tweak it a little and it is all yours.