Home/ Questions/Q 8042869
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T04:43:47+00:00

I’ve been going through documentation, tutorials and examples. But I can’t seem to get

  • 0

I’ve been going through documentation, tutorials and examples. But I can’t seem to get these 4 boxes to align properly no matter what I do.

div#frontpage{width:100%; }
div#1{width:25%; float:left; position:relative;}
div#2{width:25%; float:left; position:relative;}
div#3{width:25%; float:right; position:relative;}
div#4{width:25%; float:right; position:relative;}
.clear{clear:both;}

<div id="frontpage">
<div id="1">
</div>
<div id"2">
</div>
<div id="3">
</div>
<div id="4">
</div>
<div class="clear">
</div>
</div>

This is what I came up so far and the closest result I want to achieve. Get them to all align horizontal straight across one row. The reason why I use % instead of px is because my wordpress theme is responsive.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Just tweaked it a bit and it works fine.
    CSS

    div#frontpage{width:100%; }
div.box{width:25%; float:left; position:relative;}
.clear{clear:both;}​

    HTML

    <div id="frontpage">
<div class="box">
    a
</div>
<div class="box">
    s
</div>
<div class="box">
    d
</div>
<div class="box">
    f
</div>
<div class="clear">
</div>
</div>​​​​​​​​​​​​​

    As mentioned by Phil, Ids should not be numbers. Also, your <div id"2"> should have been <div id="2"> (missing ‘=’ sign)

    • 0