CODEWITHSUNDEEP
csshtmlalignment
YSbakker
YSbakker

Reputation: 707

Aligning 3 divs next to each other (issue)

I'm trying to have three divs next to each other, one of them is an arrow to the left, next to that one is the title, next to that one is the arrow to the right. I tried every possible float combination, but I just can't get it to work! I also found another guy with the same question, but that didn't work for me either. This is what I have:

HTML

<html>

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>


<body>

<div class="holder">
    <div class="larrholder">
    <p class="arrow"><<</p>
    </div>

    <div class="titleholder">
    <h1 class="centered">News</h1>
    </div>

    <div class="rarrholder">
    <p class="arrow">>></p>
    </div>
</div>

</body>

</html>

CSS

* {
margin: 0;
padding: 0;
}

div.holder {
margin: 0 auto;
width: 506px;
height: 50px;
border: 1px solid black;
}

div.larrholder {
float: left;
width: 100px;
height: 50px;
border: 1px solid blue;
}

div.titleholder {
width: 300px;
height: 50px;
border: 1px solid red;
}

div.rarrholder {
float: right;
width: 100px;
height: 50px;
border: 1px solid blue;
}

h1.centered {
text-align: center;
}

p.arrow {
text-align: center;
}

I hope somebody can help me... I also tried floating them all in the same direction, but that didn't work for me.

Thanks!

Upvotes: 0

Views: 577

Answers (1)

Adrift
Adrift

Reputation: 59859

You can place the second arrow after the first (in your HTML) and then float the title left.

<div class="holder">
<div class="larrholder">
    <p class="arrow"><<</p>
</div>

<div class="rarrholder">
    <p class="arrow">>></p>
</div>

<div class="titleholder">
    <h1 class="centered">News</h1>
</div>
</div>

Example: http://jsfiddle.net/x2kn2/

Upvotes: 1

Related Questions