Getting my DIVs to line up seems hard

Question

I have a very simple code:

<div>
  <div>
    <div>Topic</div>
    <div>Sub Topic</div>
  </div>
  <div>
    <div>test 1</div>
    <div>Test 2</div>
  </div>
</div>

But I want to get "test 1" to appear right of Topic. Now it appear below. Is there a way to solve with CSS?

But you're not using any CSS. Right now you're just using the default styles of the web browser. In other words, not only *can* you solve it with CSS, but you *must* use CSS if you are going to try using a generic tag such as `
`. As it stands right now, this is woefully incomplete code. — riwalk, May 24 '11 at 15:22
@stargazer i think *woefully incomplete* is an exaggeration. the answers are shorter than your comment — kenwarner, May 24 '11 at 15:25
@qntmfred, it is woefully incomplete in a *conceptual* fashion. Writing code using nothing but `
`'s and expecting it to do anything useful shows a very incomplete knowledge of the general framework of the web. — riwalk, May 24 '11 at 15:29
You should totally be using a `dl` ([definition list](http://html5doctor.com/the-dl-element/)) here. Answer incoming. — thirtydot, May 24 '11 at 15:30
@stargazer it was complete enough for everybody who answered to understand what she wanted. when somebody asks a question about CSS, it isn't necessary to point out that their knowledge of CSS is incomplete. — kenwarner, May 24 '11 at 15:35
@qntmfred, if someone were trying to hack the linux kernel without learning C, I'd tell them to learn C and come back. Christina is trying to do web programming without even knowing what CSS is meant for. Go learn CSS and come back. — riwalk, May 24 '11 at 15:47

score 6 · Accepted Answer · edited May 24 '11 at 15:38

6

<div>
  <div style="float:left;width:200px;">
    <div>Topic</div>
    <div>Sub Topic</div>
  </div>
  <div style="float:left;width:200px;">
    <div>test 1</div>
    <div>Test 2</div>
  </div>
<div style="clear:both;"></div>
</div>

edited May 24 '11 at 15:38

kenwarner

28,650
28
130
173

answered May 24 '11 at 15:22

Treemonkey

2,133
11
24

i added an extra div to clear the floats which can solve some common cross browser issues. – Treemonkey May 24 '11 at 15:25
You need to fix `float:left:width:200px;` into `float:left semicolon_goes_here width:200px;`. It's amazing how many people upvote an answer with glaring mistakes :) – thirtydot May 24 '11 at 15:37
1

@qntmfred: I'd have fixed it myself, *after a while*. I'd prefer to let @Treemonkey fix it for himself, that way he's less likely to make the same mistake in the future. – thirtydot May 24 '11 at 15:41
Not to take away from this right answer, but it muddies up the markup with the need for adding an additional div each time you want to clear the floats. My solution is the preferred way to clear floats per the best practices found at [Html5Boilerplate](http://www.html5boilerplate.com) – Code Maverick May 24 '11 at 15:46
1

@Scott: You can simply use `overflow: hidden` 99% of the time, as in my answer. It's a whole lot shorter to include in an Stack Overflow answer than `clearfix` :) – thirtydot May 24 '11 at 15:49
@thirtydot - I tend to stick with best practices from the guru that is Paul Irish at Html5Boilerplate. I understand that overflow: hidden works in most cases, but I like how the .clearfix in my solution addresses the specific issues and makes certain that all basis are covered. – Code Maverick May 24 '11 at 15:53
1

@Scott: I'm not arguing with that, but here's some background info: you might like to read this question: http://stackoverflow.com/questions/5565668/in-2011-is-there-any-need-for-clearfix/5566093 - I had to rack my brains to think of an example where `overflow: hidden` *didn't work*. @clairesuzy also points out another instance where `overflow: hidden` won't do it (dropdown menus). I personally dislike `clearfix` because you have to add an extra class in your HTML for something that should be handled purely in CSS. I also (again) dislike using it in Stack Overflow answers because it's long. – thirtydot May 24 '11 at 16:01
@thirtydot - That's your prerogative and you are entitled to that. I understand what you are saying, I am simply saying that this "accepted answer" is not really a complete solution and is worse in terms of muddying up the markup. As far as `overflow: hidden` vs `.clearfix`, I'll stick with my `.clearfix` which is a very elegant solution compared to the other `.clearfix` solutions. I just don't like solutions that don't cover all basis, even if it is only 1% =D. – Code Maverick May 24 '11 at 16:08
1

@Scott: I don't like the answers to this question (including yours) that [other than my own](http://stackoverflow.com/questions/6112783/getting-my-divs-to-line-up-seems-hard/6112966#6112966) because they are "div soup". The `dl` element is a far better choice. I think we can both agree the accepted answer is not the best answer, but that's because the OP is not very experienced. – thirtydot May 24 '11 at 16:35
@thirtydot - I agree with you on the Html5 `dl` element. That does seem how the OP intends to use the data. However, I disagree that my answer is div soup. It does not add anything extra to the markup. It uses a class, just as yours does. To me, at this point, it's purely semantics. – Code Maverick May 24 '11 at 16:43

score 5 · Answer 2 · answered May 24 '11 at 15:34

As in my comment, I'm using a dl element here.

The HTML is far more semantic, and much lighter:

See: http://jsfiddle.net/46WRw/

<dl class="topics">
    <dt>Topic</dt>
    <dd>test 1</dd>

    <dt>Sub Topic</dt>
    <dd>Test 2</dd>
</dl>

.topics {
    overflow: hidden; /* clear floated child elements */
    background: #ccc;
    width: 200px
}
.topics dt, .topics dd {
    margin: 0;
    padding: 0;
    float: left;
    width: 50%
}
.topics dt {
    font-weight: bold
}

Code Maverick · Answer 3 · 2014-03-14T15:58:48.570

Like the others, I would use float: left, but you need to clear the parent div too like in this working jsFiddle demo.

HTML:

<div class="clearfix">
  <div class="floatLeft">
    <div>Topic</div>
    <div>Sub Topic</div>
  </div>
  <div class="floatLeft">
    <div>test 1</div>
    <div>Test 2</div>
  </div>
</div>

Hello

CSS:

div { 

    margin: 10px; 
    padding: 10px; 
    border: dotted 1px black; 

}

.floatLeft { float: left; }

/* The Magnificent Clearfix: 
   Updated to prevent margin-collapsing on child elements. 
   j.mp/bestclearfix */

.clearfix:before, .clearfix:after { 

    content: "\0020"; 
    display: block; 
    height: 0; 
    overflow: hidden; 

}

.clearfix:after { clear: both; }

/* Fix clearfix: 
   blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */

.clearfix { zoom: 1; }

score 1 · Answer 4 · answered May 24 '11 at 15:22

1

Don't use divs. (Though you can use float:right and float:left for aligning divs on the same row) Use tables:

<table>
<tr>
<td>Topic</td>
<td>Test 1</td>
</tr>
<tr>
<td>Sub Topic</td>
<td>Test 2</td>
</tr>
<tr>

</tr>
</table>

answered May 24 '11 at 15:22

Thomas Shields

8,874
5
42
77

I'm not a big fan of tables, but this does solve the question. – beatgammit May 24 '11 at 15:23
Don't use tables for anything that is not considered tabular data. – Loktar May 24 '11 at 15:23
@tjameson @Loktar yeah, i wouldn't always recommend it but it seemed OP had some tabular data here. – Thomas Shields May 24 '11 at 15:23
3

also if you wanted to use a table then should really use the correct markup for the titles :P – Treemonkey May 24 '11 at 15:26

score 1 · Answer 5 · answered May 24 '11 at 15:23

1

<div>
  <div style="float:left">
    <div>Topic</div>
    <div>Sub Topic</div>
  </div>
  <div style="float:left">
    <div>test 1</div>
    <div>Test 2</div>
  </div>
</div>

If this is tabulated data though, you can can use tables for it. And that is a perfectly valid thing to do.

answered May 24 '11 at 15:23

planetjones

12,469
5
50
51

This answer doesn't work if there is a lot of words instead of just "test 1" or "test 2" :-( – TonyG May 24 '11 at 15:36
@Christina not sure what the other words are - check this example out http://jsfiddle.net/4PkDA/ – planetjones May 24 '11 at 15:37

Kyle Sletten · Answer 6 · 2011-05-24T18:39:58.383

1

Actually, it should be pretty easy using selectors.

div div div{
     display: inline;
}

This will only select the divs that are children of two divs.

edited May 24 '11 at 18:39

answered May 24 '11 at 15:23

Kyle Sletten

5,365
2
26
39

1

`div div div { display:inline }` should actually do the same. And `div > div > div { display:inline }` doesn't work in IE. – Midas May 24 '11 at 17:44
Oh, I didn't know about the IE issue. – Kyle Sletten May 24 '11 at 18:39

score 0 · Answer 7 · answered May 24 '11 at 15:29

I would recommend that you use a CSS framework to do this. I personally like Blueprint the best. Even when you get to an advanced level in page layout with CSS, a framework is still useful in achieving trivial effects like the one you've described very quickly.

Checkout:

http://www.blueprintcss.org/

http://www.blueprintcss.org/tests/

http://www.blueprintcss.org/tests/parts/sample.html

For more information and sample code.

HTH

score 0 · Answer 8 · answered May 24 '11 at 15:50

0

div { overflow:hidden; width:100% }
div div { width:auto; float:left }
div div div { float:none }

No clearing div needed.

answered May 24 '11 at 15:50

Midas

7,012
5
34
52

Getting my DIVs to line up seems hard

8 Answers8