Divs beside Divs

[CourteousCat]

I was wondering if there is any way to position a div beside a div with HTML?
Heres my code so far:

Code: Select all

<div style="border: 3px solid;width: 100px;
height: 200px;"><u>Navigation</u>
</br>
</br>
The Clan</br>
<a href="">about</a>
</div>
<div style="border: 3px solid;width: 300px;
height: 200px;"></div>

I need the two divs to look something like this:
[Div 1] [Div 2]
Instead of
[Div 1]
[Div 2]

[mwa103]

Just change each of the div to include:

style="...(other styling)... float:left;"

That will put them side by side. You can do this multiple times, they will wrap to the next line if they are too wide to fit in one row. To break down to the next line on your own, all you need to do is add a <div style='clear:both;'> </div> after them.

-Mike

[CourteousCat]

Thanks a bunch man, one question tough... is there anyway to remove one of the div border lines... right now it looks something like this ([ is a border)
[Div 1][Div 2] Could i make it [Div 1] [Div2] by putting a space, if so, how do you code that space?

[mwa103]

To show a space between the div's, you can change the padding properties for one of them. For example, you can change the padding-left value for the div on the right which will move it away from the div on the left:

Code: Select all

<div style="border: 3px solid; width: 100px; height: 200px; float:left;">
<u>Navigation</u>
</br>
</br>
The Clan</br>
<a href="">about</a>
</div>
<div style="border: 3px solid; width: 300px; height: 200px; float: left; padding-left: 10px;">
</div>


More info can be found here: http://www.w3schools.com/css/css_padding.asp

Not sure what you're asking about the borders, but each side's border can be edited seperately. More info about borders found here: http://www.w3schools.com/css/css_border.asp

-Mike

[generalchaos316]

I think it is actually the margins that will put a space between the two boxes (especially if you have them styled with borders).

- Padding pushes your words/content farther from the inside edge of your div.
- Margins push anything else on your page farther from the outer edges of your div.

I will attempt to use your ASCII drawings for examples I am not going to illustrate the top or bottom padding/margins to keep things visually pleasing.

| = a div's border
Mx = margin for div x
Px = padding for div x

M1 | P1 [div1 content] P1 | M1 M2 | P2 [div2 content] P2 | M2

So you could do something like:

Code: Select all

<div style="border: 3px solid; width: 100px; height: 200px; float:left; margin: 5px;">
<u>Navigation</u>
</br>
</br>
The Clan</br>
<a href="">about</a>
</div>
<div style="border: 3px solid; width: 300px; height: 200px; float: left; margin: 5px;">
</div>


This will put a 5 pixel margin on all sides (top right bottom and left) around the outer edge of each of your divs for a total of 10 pixels of space in between them.

5px | P1 [div1 content] P1 | 5px 5px | P2 [div2 content] P2 | 5px

What do you do if you only want to space out the two inner edges between the two divs but not the rest of the sides? You can specify margins of each side...always in this order:

margin: Top Right Bottom Left.

So...

margin: 0px 5px 0px 0px; on div1
margin: 0px 0px 0px 5px; on div2

0px | P1 [div1 content] P1 | 5px 5px | P2 [div2 content] P2 | 0px

Hope that helps! Also, paddings are formatted in exactly the same way for when you want to want to get creative with those

[mwa103]

Thank you for catching my mistake. You are right, margins would be the way to go here with the borders. Good catch.

-Mike

[generalchaos316]

Anytime

Thanks for your help in my other post!