CSS Float Issue - Divs displaying in improper location

Question

I have 3 divs. The first div is the rectangular border. I tried different combinations of floating to get the 2 divs to display next to the first div, but have been unsuccessful. Here is the code below and the jsfiddle.

<div class="attempt">

</div>
<div>
<ul id="menu">
  <li><a style="background:#3F4E64"  href="/html/default.asp">Button1</a></li>
  <li><a style="background:#788291">Button2</a></li>
</ul>  
</div>

<div>
<H2>TITLE</H2>
<p>
BADKADA
</p>
<p>
Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
</p>
<p>
Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
</p>

CSS

.attempt  {
  width:15px;
  height:1290px;
  background: #3F4E64
}

https://jsfiddle.net/ksaluja/f1s51sj4/

i see no float here, maybe you could take a look at flex :) https://jsfiddle.net/f1s51sj4/1/ — G-Cyrillus, Feb 27 '16 at 23:04

score 0 · Accepted Answer · answered Feb 27 '16 at 23:03

Take out the display property so the first div defaults to block. Then float it to the left and give it a margin-right of 20px or so to give the content some breathing room.

.attempt {
    float:left;
 width: 15px;
    height: 1290px;
    background: #3F4E64;
 margin-right:20px;
}

<div class="attempt">

</div>
<div>
    <ul id="menu">
        <li><a style="background:#3F4E64" href="/html/default.asp">Button1</a></li>
        <li><a style="background:#788291">Button2</a></li>
    </ul>
</div>

<div>
    <H2>TITLE</H2>
    <p>
        BADKADA
    </p>
    <p>
        Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
    </p>
    <p>
        Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
    </p>

    <p>
        Fusce luctus Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium fring.
    </p>
</div>

ZeroFlex · Answer 2 · 2016-03-03T22:22:42.857

Setting the display property for the attempt div to 'inline-block' will display the div as an inline-block container, so any content or div's ahead will be displayed after it and not by side. So, to get the next divisions to the side of the first one, you can do as @symlink explained. 'block' or the default property of display, will set the div as an independent block, and other divisions will align on the side to this block.

CSS Float Issue - Divs displaying in improper location

2 Answers2