CODEWITHSUNDEEP
css
hvgotcodes
hvgotcodes

Reputation: 120198

css positioning two divs next to each other

I have this fiddle

http://jsfiddle.net/JsZ9q/5/

I am trying to get the div with the 'b' letters to have its left edge be up against the right edge of the div with the 'a' letters.

The trick is, in the actual application, the left property of the left div is not set (meaning its left position will change), and there is variable number of a characters (meaning its width will change).

Update -- i added some more divs to be more clear. In all cases, I want the 'right' div to have its left edge up against the right edge of the left div, which can vary in width due to its content. Also, not shown, is that the left property of the left div can vary across rows.

Upvotes: 1

Views: 5513

Answers (5)

Edwin
Edwin

Reputation: 2114

Your solution:

http://jsfiddle.net/JsZ9q/9/

Add float: left;, replace position: absolute; with position: relative; to make this work, and set margin-left (or left) to 0. You can ignore the clear attributes - I only added that for readability.

Btw, this example screws with the basic reasons CSS was separated from HTML - HTML creates the structure; CSS provides the styling.

At no point should you EVER use the style attribute in your HTML, especially since the divs have a width that is only defined at runtime and you're only running this in CSS (no JS). And finally, avoid absolute positioning as much as possible.

Upvotes: 1

Loki Astari
Loki Astari

Reputation: 264401

Try:

<html>
<head></head>
<body>
    <div>
        <div style="display:inline">b</div>
        <div style="display:inline">a</div>
    </div>
</body>
</html>

Note: Span are inherently inline:
The above should behave the same as this:

<html>
<head></head>
<body>
    <div>
        <span>b</span>
        <span>a</span>
    </div>
</body>
</html>

Edit: Based on fiddler

Remove the absolute position from div's in the style sheet.
Don't put white space between the div's this includes newline (as multiple white space will be replaced by a single space but this has size).

<div style="top:10px">
    <!--         ^^^^^ No absolute here -->
    <div style="display:inline">aaaa</div><div style="display:inline">bbbb</div>
    <!--                               ^^^^^^  No Space here -->
</div>

See here: http://jsfiddle.net/sNqpP/ Where I have changed it for the first line aaaabbbb but not for the others.

Upvotes: 1

Alan Weibel
Alan Weibel

Reputation: 392

You need to have a parent object with a width in order to float child objects right next to each other: http://jsfiddle.net/alanweibel/6aGbU/

<style type="text/css">
.wrap
{
    width:100%;
}
.left
{
    float:left;
}
</style>
<div class="wrap">
    <div class="left">aaaa</div>
    <div class="left">bbbb</div>
</div>

Upvotes: 0

PseudoNinja
PseudoNinja

Reputation: 2856

use a wrapper for positioning: I Forked your Fiddle

Upvotes: 0

Derk Arts
Derk Arts

Reputation: 3460

Float does this:

.left {
    float:left;
}

.right {
   float:left; 
}

http://www.w3schools.com/cssref/pr_class_float.asp

Or am I missing something in your question?

If you must use absolute positioning, you need to know the width of the leftmost div. That would involve some JS. Let me know if thats your problem.

Upvotes: 0

Related Questions