<ul> with <li> inside CSS column are not wrapping properly...

Question

Lalalal, I am going insane with the CSS...

I can't achieve the simplest layout here, something is breaking. I want 2 columns next to each other:

[**** 300px ****][******** 500 px ********]

                  2nd column heading
Some text..       - 1st bullet point text
                  - 2nd bullet...
                  - 3rd...
                  -------------------------

I have these divs:

<div class="faq_item">
  <div class="faq_link">
   <a href="">Video/screenshot coming soon.. </a>
  </div>
  <div>
   <strong>Q: How to add an item to a group? </strong>
   <ul>
   <li> Place your finger on one of the four icons at the bottom toolbar.</li>
   <li> Move your finger with the icon to drag it to the group to which you wish to add the item.</li>
   <li> Release your finger.</li>
   <li> Enter the price, adjust the quantity if needed, and press the 'return' button.</li>
   </ul>
  </div>
        <hr/>
    </div>

And the CSS:

    .faq_item strong {
    display:block;
    margin-bottom: 10px;
}
.faq_item span {
    display: block;
}
.faq_item {
    margin:0 0 30px 50px;
}
.faq_item div {
    display:inline-block;
}
.faq_link {
    width:300px;
}
div.faq_item hr {
    width:500px;
    float:right;
    clear:left;
}

My problem is that 1st div inside sits on top of the 2nd div when the code is at it is now. Once I eliminate the longest "li" tags, the whole div aligns properly (2 divs inside are next to each other). I don't understand why don't "li" wraps as it should normally and with 2 divs as inline-block they should be next to each other and not stacked vertically.

Please advise. Thank you!

Answer 1

Here's resource with perfect 2column CSS layout (and bunch others) Generally, you have to get floating right

Answer 2

Here you go:

<style type="text/css">

.wrapper {
    width:800px;
    margin:0;
    padding:0;
}

.faq-link {
    width:300px;
    background:#DDD;
}

.faq-list {
    width:500px;
}

.left {
    float:left;
}

.right {
    float:right;
}

</style>

<div class="wrapper">
    <div class="left faq-link">
     <a href="">Video/screenshot coming soon.. </a>
    </div>
    <div class="right faq-list">
     <strong>Q: How to add an item to a group? </strong>
        <ul>
            <li> Place your finger on one of the four icons at the bottom toolbar.</li>
            <li> Move your finger with the icon to drag it to the group to which you wish to add the item.</li>
            <li> Release your finger.</li>
            <li> Enter the price, adjust the quantity if needed, and press the 'return' button.</li>
        </ul>
    </div>
</div>

There are a couple of traps here. Padding will screw everything up, so you have to account for it in the padded class (i.e. padding:0 10px; adds a total of 20 pixels to the width, so if .faq-link had padding:0 10px; declared, the width would be 280px). Also, anything placed below these floated columns will need the clear:both css property.

Answer 3

Another method would be to drop your 2 divs in a container, then use margin to position the text where needed.

Example:

<div class="faq_container">
  <div class="faq_link">
    ...
  </div>
  <div class="faq_item">
    ...
  </div>
</div>

with css:

.faq_container{
width:800px;
}
.faq_item{
width:800px;
margin: 0 0 30px 350px;
}
.faq_link {
width:300px;
float: left;
}

This simply means the content div ignores the link div to the left, with the added bonus, that if you need something else on the right hand side you can simply float it there and edit the margins of the conent div to allow it to fit.