Solved

CSS Div on one line

Posted on 2009-07-10
11
813 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?
0
Comment
Question by:james4651
  • 4
  • 4
  • 2
  • +1
11 Comments
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 24828407
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

0
 

Author Comment

by:james4651
ID: 24828419
I'm sorry I'm not that great at css but what does the margin do?  Thanks
0
 
LVL 20

Accepted Solution

by:
ddayx10 earned 500 total points
ID: 24828429
You can do that. The trick though is that <div>s are block level elements. That means that they automatically take up a whole line by themselves. To overcome this you could use a different type of element (one that is an inline type), but in doing so it would make managing the width difficult.

In essence your only options are to A) float the <div> elements OR B) use absolute positioning on them.

Floating is the right idea. I put a sample below for you. I put borders around the <div>s to help you see. Note how I had to do some carful math to make them line up (because of the borders). Also note that if you put something into a div that is larger than the width/height dimension specified it will stretch the <div> and mess things up.

I'm sure this creates some problems for you in your idea of dynamically creating <div>s on one line in code behind, but it shows you how it works and what you will have to take into account to make that work out. You will have to make some decisions about how many <div>s are allowed on a line based on the width of your page and the minimum size you want any one <div> to be.

Hope that makes sense.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Managing Divs</title>

    <style type="text/css">

		body{ width:758px; margin:10px auto; }

		.floatDiv{ float:left; width:250px; height:20px; border:1px solid red;  }    

		.notFloat{ clear:left; width:755px; height:20px; border:1px solid green;  }  

    </style>

</head>

<body>
 

	<div class="floatDiv"></div>

	<div class="floatDiv"></div>

	<div class="floatDiv"></div>

	

	<div class="notFloat"></div>
 
 

</body>

</html>

Open in new window

0
 
LVL 20

Expert Comment

by:ddayx10
ID: 24828432
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.
0
 

Author Comment

by:james4651
ID: 24828587
Hi,

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

Thanks
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:james4651
ID: 24828599
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.  
0
 
LVL 20

Expert Comment

by:ddayx10
ID: 24828656
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.
0
 

Author Closing Comment

by:james4651
ID: 31602326
Thanks for all the information I will look at the link provided.  Yes, I'm kind of a HTML/CSS newb.
0
 
LVL 20

Expert Comment

by:ddayx10
ID: 24828672
<<<<
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!
0
 
LVL 42

Expert Comment

by:David S.
ID: 24828980
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.)
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 24830382
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.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now