We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

CSS Div on one line

james4651
james4651 asked
on
Medium Priority
1,160 Views
Last Modified: 2012-05-07
Hi,

I'm trying to place a random number of Divs on the same line.  I use the for loop on my partial page and can create multiple divs depending but not sure how to place them on the same line.  Can you give specific HTML on how to put the Divs in HTML?  Also can I add maybe one space between?
Comment
Watch Question

CERTIFIED EXPERT

Commented:
You use floating to place the div:s beside each other. Example:
<style type="text/css">
.Items div { float: left; margin: 2px; }
</style>
 
<div class="Items">
   <div>These</div>
   <div>will</div>
   <div>be</div>
   <div>next</div>
   <div>to</div>
   <div>each</div>
   <div>other.</div>
</div>

Open in new window

Author

Commented:
I'm sorry I'm not that great at css but what does the margin do?  Thanks
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Commented:
His margin puts a 2px border around each <div> top/right/bottom/left. I forgot to mention that in my sample Im showing you how to start a new line as well by clearing the previous floats.

Author

Commented:
Hi,

Is there a way to put a space between them instead of right side by side?

Thanks

Author

Commented:
I have read something about using <br style="clear:both" /> but not sure where that fits in.  I tried what you posted and you have to put the sizes in or at least it seems like.  

Commented:
Yes you can put a space between them james4651. Just adding a margin:[top/bottom] [left/right] will fix that up. I wrote it that way so you would understand the way it works, you would write it like this:

margin:0px 5px;

OR you could do margin-left:5px or various other things.

Keep in mind that adding a margin this way actually increases the size of the div width. So look at this declaration:

<div style="border 1px solid red; margin-left:5px; width:100px;">Some Stuff</div>

That div will actually be 107px wide.
100px declared width + 1px left border + 1px right border + 5px left margin = 107px

I'm answering your questions about how to put a div side by side, and space in between, but it is good to lookup and understand the CSS choices you are making as well as what is possible. You can start small and actually learn alot just by viewing and referencing back to a simple CSS tuturial site like this one:

http://www.w3schools.com/css/

You can pick things up very quickly by referring to that, and it's not that much to just give a look over, should really improve your basic understanding.

Author

Commented:
Thanks for all the information I will look at the link provided.  Yes, I'm kind of a HTML/CSS newb.

Commented:
<<<<
Keep in mind that adding a margin this way actually increases the size of the div width. So look at this declaration:

<div style="border 1px solid red; margin-left:5px; width:100px;">Some Stuff</div>

That div will actually be 107px wide.
100px declared width + 1px left border + 1px right border + 5px left margin = 107px
>>>

Stupid Me! disregard all of that, I  went a bit nuts for a minute there, that is all wrong about the margin increasing the size of the div its applied to. I was thinking of something else unfortunately!
David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

Commented:
While the margin doesn't increase the size of the div, it does increase the space it takes up when applied to a floated element. (Margins act differently on floated elements than on non-floated elements.)
CERTIFIED EXPERT

Commented:
I put a margin on the elements in my example, so that they are not side by side.

Just adjust the margin to get the spacing that you want.

You can control the margins separately around the element by specifying them as "top right bottom left". Example:

margin: 0 5px 0 2px;

This gives you no top margin, a 5px right margin, no bottom margin and a 2px left margin.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.