Home/ Questions/Q 7594851
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T21:31:26+00:00

i have following block of the code on my page <div style=width:100%; >//div0 <div

  • 0

i have following block of the code on my page

<div style="width:100%; ">//div0
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; ">//div1
Image1
</div>
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; ">//div2
Image 2
</div>
</div>

what i want is, these two div should combine to make a larger div. as their width is divided to 50% each, they should be positioned LEFT AND RIGHT TO EACH OTHER, but in reality, the div2 is positioned BELOW the div1

can somebody explain me what should i do? and what is the problem with my simple code?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is a very basic css issue. What you should look into is the float property in CSS. Without floating, all elements on the page will be positioned one after another.

    <div style="width:50%; background:#f1f1f1; border:4px solid #fff; float: left;">//div1
Image1
</div>
<div style="width:50%; background:#f1f1f1; border:4px solid #fff; float: right;">//div2
Image 2
</div>

    That should achieve what you want.

    EDIT: actually the above wouldn’t work either. Because you have a border. Think about is this way. Your page has 100% width. If your page is 1000px wide. Your divs will each take up 50% or 500px of the screen estate. Your border will take up 4 x 2 = 8px or 0.8% of the page. In total you’ll add up to 101.6% of the page. Which will force the divs to load one after another.

    To actually witness the effect of floating left and right, remove the border or reduce the width:

    <div style="width:45%; background:#f1f1f1; border:4px solid #fff; float: left;">//div1
Image1
</div>
<div style="width:45%; background:#f1f1f1; border:4px solid #fff; float: right;">//div2
Image 2
</div>

<div style="width:50%; background:#f1f1f1; float: left;">//div1
Image1
</div>
<div style="width:50%; background:#f1f1f1; float: right;">//div2
Image 2
</div>

    Also note that your depending on your page width, your percentage will have different effects. The 45% and 4px border isn’t going to play along nicely all the time. If you want full screen perfectly positioned left and right box, it’s better to do it without the border and do additional styling inside each div.

    • 0