Setting up two DIVs with lists inside an outer DIV

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.

Use the css attribute float:right for the floating divs (on both), list-style-type:none on the <ul> to remove the bullet points and height:12px for the height.

Are you okay with applying these? Or do you need a walk-through?

That line1 with text1 next to it looks to me like a definition list. Check out the dd and dt tags to see how that works. I think that will make you achieve this layout easier.

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/

If there is a relation between hdr_msg4 and hdr_msg5 you should definitely use a regular table here! You propably heard that tables are bad practice for website layouts, but when you want to arrange a table, then use one!