Question

I am new to CSS and I would really like some help if possible. What I need to do is something like below:

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x                                   Line 1      Text 1 x
x                                   Line 2      Text 2 x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

The area marked in x’s is already defined as a DIV with name

<div id="hdr_sgn">
</div>

Inside that I need to create two DIV areas called hdr_msg4 and hdr_msg5. Inside each of these I need to create two lists without no list circles. Each list would have two rows and they need to be each 12px high. The two DIV areas need to be floating right and no spacing between them.

I am not sure how to set up the floating and things. Does anyone have any example they could show me?

Thanks for reading my post.

Answer 1

HTML

    <div id="hdr_sgn">
<div id="hdr_msg4">
    <ul>
        <li>Line 1</li>
        <li>Line 2</li>
    </ul>
</div>
<div id="hdr_msg5">
    <ul>
        <li>Text 1</li>
        <li>Text 2</li>
    </ul>
</div>
<div class="clr"></div>

CSS

    #hdr_sgn {
       width:100%;
       background-color:#eee;
    }
    #hdr_msg4, #hdr_msg5 {
       float:right;
    }
   #hdr_sgn ul {
      list-style:none;
    }
  .clr {
     clear:both;
    }

Fiddle http://jsfiddle.net/EnJq8/