Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 166
  • Last Modified:

display 2 centered boxes side by side with titles

I am trying to style an old table based page with css
I am trying to put 2 div boxes side by side both with a title on this page:
http://roofgenius.com/RoofCalcWriter/test.asp
The page i am replacing boxes displayed in table cells bottom of page
http://roofgenius.com/RoofCalcWriter/SpellCheck.asp
What am doing wrong ?
0
isnoend2001
Asked:
isnoend2001
  • 2
1 Solution
 
Chris StanyonCommented:
See if this gets you in the right direction:

<div id="wrapper">
    <div id="left">
        <h2>This is the left</h2>
        <div class="content">
            This is where the content goes
        </div>
    </div>
    <div id="right">
        <h2>This is the right</h2>
        <div class="content">
            This is where the content goes
        </div>
    </div>
</div>

Open in new window

//CSS
#wrapper { width: 500px; overflow:hidden }
#wrapper h2 { text-align:center;}
#left { width: 48%; float:left; }
#right { width: 48%; float:right; }
.content { border: 1px solid green; }

Open in new window

You seem to have got your DIVs wrapped inside one another!
0
 
Chris StanyonCommented:
Here's some code to have a play with if you need to :)

http://jsfiddle.net/ChrisStanyon/EYhd6/
0
 
isnoend2001Author Commented:
amazing you do it in a few minutes that i work on for hours
Thanks
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now