CODEWITHSUNDEEP
css
Rick Slinkman
Rick Slinkman

Reputation: 663

HTML <div> horizontal alignment

I'm trying to align two divs horizontally. Having tried about 15 different approaches, I still don't manage to get it working.

This is how my divs are aligned now

$html .= '<div class="fotoLinks">';
$html .= '  <img src="'.$image->getWebPath().'"/>';
$html .= '</div>';
$html .= '<div class="tekst">';
$html .=    $this->text;
$html .= '</div>';

With corresponding CSS (div.alinea is a wrapper div):

div.alinea
{
    float: left;
    width: 100%;
    margin-bottom: 15px;
}

div.tekst
{
    float: left;
}

div.fotoLinks
{
    float: left;
    margin-right: 15px;
    height: 100%;
}

I hope to get some inspiration for a new approach.

Upvotes: 0

Views: 5535

Answers (5)

Patrick JC
Patrick JC

Reputation: 21

You have to define the width for your text div and image div, since as is it inherits the parent elements width of 100%. There are a ton of others ways/answers, but this would have you tweak the least amount of code to get it to work right.

Upvotes: 2

Rob
Rob

Reputation: 15168

Just give the 'tekst' div a left-margin. I didn't test this so I'm not sure that alone will fix it without adjusting something else.

Upvotes: 0

Sethi
Sethi

Reputation: 1398

Try

display: inline-block;

Instead of float: left;

EDIT:

A method you can try, but is less supported, for your wrapper div, set:

display: table;

And for your inner divs:

display: table-cell;

Upvotes: 3

Tarun Uday
Tarun Uday

Reputation: 94

In the CSS for div.tekst, put in clear:both.

Upvotes: 0

craigmj
craigmj

Reputation: 5077

This works for me:

<html>
<head>
<style>
.ftext {
    border: 1px solid red;
    float:left;
}
</style>
</head>
<body>

<div class="ftext">
This is the left text.
</div>
<div class="ftext">
This follows to the left.
</div>

</body>
</html>

It floats the right text beside the left text.

Upvotes: 0

Related Questions