CODEWITHSUNDEEP
htmlcss
TonyG
TonyG

Reputation: 1675

Getting my DIVs to line up seems hard

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?

Upvotes: 4

Views: 183

Answers (8)

Code Maverick
Code Maverick

Reputation: 20415

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; }

Upvotes: 2

Kyle Sletten
Kyle Sletten

Reputation: 5413

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.

Upvotes: 1

Midas
Midas

Reputation: 7131

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

No clearing div needed.

Upvotes: 0

Treemonkey
Treemonkey

Reputation: 2163

<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>

Upvotes: 6

thirtydot
thirtydot

Reputation: 228182

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
}

Upvotes: 5

Homer6
Homer6

Reputation: 15159

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

Upvotes: 0

planetjones
planetjones

Reputation: 12633

<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.

Upvotes: 1

Thomas Shields
Thomas Shields

Reputation: 8942

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>

Upvotes: 1

Related Questions