CODEWITHSUNDEEP
htmlcsscss-float
Jurudocs
Jurudocs

Reputation: 9175

HTML trouble: multiple Divs float

I'm sitting now 1 hour working on this problem: How to make "Field Item 2" float at the right site of "Field Item 1" Is that possible with CSS at all? Or are there too may divs in between? Any idea? Tanx a lot!

<html>
<head>
    <title>Test float</title>
</head>

<body>
    <div class="group-header user-slogan">
        <div class="field field-name-field-user-slogan field-type-text field-label-hidden">
            <div class="field-items">
                <div class="field-item even">Field Item1</div>
            </div>
        </div>
        <div class="even zitatgeber" style="float:left;">Field Item2</div>
    </div>
</body>
</html>

Upvotes: 0

Views: 1108

Answers (3)

Yagiz Ozturk
Yagiz Ozturk

Reputation: 5428

Probably, you should specify width for your parent div and take the div you want to float inside it(parent).

Try this :

<html>
<title>Test float</title>
</head>

<body>
<div class="group-header user-slogan">
    <div class="field field-name-field-user-slogan field-type-text field-label-hidden">
        <div class="field-items" style="width: AAApx;">
            <div class="field-item even" style="float:left;">Field Item1</div>
            <div class="even zitatgeber" style="float:left;">Field Item2</div>
        </div>
    </div>

</div>

</body>
</html>

You can also float the second item div to the right if the parent div behaves as a block level element

Upvotes: 1

Kelvin
Kelvin

Reputation: 78

You might want to try this, add style="float:left;" into the div which is in the same level with the Field Item2, and change the style of Field Item2 to float:right. Here it is:

<body>
<div class="group-header user-slogan">
    <div class="field field-name-field-user-slogan field-type-text field-label-hidden" style="float:left;">
        <div class="field-items">
            <div class="field-item even">Field Item1</div>
        </div>
    </div>
    <div class="even zitatgeber" style="float:right;">Field Item2</div>
</div>
</body>

Remember to add the specific width for the left and right, so the item will float correctly.

Upvotes: 1

Rob
Rob

Reputation: 4947

You should use float:left on both the divs

Upvotes: 1

Related Questions