Solved

display 2 centered boxes side by side with titles

Posted on 2013-06-20
3
155 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 42

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 42

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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

707 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now