Why Text not Center Aligned?

[motion2082]

Hey guys,

Having a little trouble with a 2 column layout

Addresses seems to be in the right position but heading “New South Wales” is overlapping the first div.

http://tinyurl.com/pejmns3

CSS:

   #wrap2 {
   width:690px;
   margin: auto;
   padding-top: 10px;
   padding-bottom: 10px;
}  
#left_col2 {
   float:left;
   width:300px;
   padding-left: 80px;
}
#right_col2 {
   float:right;
   width:230px;
}
#centre_col2 {
   float:left;
   padding-top: 10px;
   text-align: center;
}

[Paulie_D]

Your structure might be a little off.

If those heading are supposed to span both the left and right columns then they can’t be inside either one.

The heading should come before both left and right columns.

You’d have to do something like

<div class="wrap">
  <section>
    <h3>Section 1</h3>
    <div class="left"></div>
    <div class="right"></div>
  </section>
  <section>
    <h3>Section 2</h3>
    <div class="left"></div>
    <div class="right"></div>
  </section>
</div>

[motion2082]

Unfortunately it did not like <section> :(

[motion2082]

Ok take a look now.

Think this will work

[Paulie_D]

Unfortunately it did not like <section>

I did say “something like”….its the way I would have built it…you obviously have to work with what you have.

Ok take a look now.

You haven’t fixed the structure issue…you’ve twiddled with the CSS to get the text to fit using ‘magic numbers’ …but hey, if you’re happy…go with it.

[motion2082]

Would not say im happy with it but its a quick fix for now

Will have to research a little more on your solution above to get it right. Dont like messy code which is what I have atm

[Author]

Posts