Solved

display 2 centered boxes side by side with titles

Posted on 2013-06-20
3
159 Views
Last Modified: 2013-06-20
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
Comment
Question by:isnoend2001
  • 2
3 Comments
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39263115
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
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39263163
Here's some code to have a play with if you need to :)

http://jsfiddle.net/ChrisStanyon/EYhd6/
0
 

Author Closing Comment

by:isnoend2001
ID: 39263194
amazing you do it in a few minutes that i work on for hours
Thanks
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
compact pure CSS Read More Toggle 4 147
Divi Them Help with Full Width header 20 94
Input box width 6 32
Botom of page is wrong color 5 17
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question