Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and beginning April 20th, 2021 (Eastern Time) the Yahoo Answers website will be in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.

Trending News

Promoted
rdp870
rdp870 asked in Computers & InternetProgramming & Design · 1 decade ago

CSS question for those proficient in the language?

I'm learning CSS, but I can't figure out how to "columnize" (for lack of a better term) and center web content. Take for example this yahoo answers webpage (using 1280x1024 res): how do I create a website so that the outside borders are a certain background color that I choose, while the content is another background color?

3 Answers

Relevance
  • Anonymous
    1 decade ago
    Favorite Answer

    All those divs given by previous Answerer are not needed for just the background color and the inner div wrapper container which is another color.

    Set the background color you want for the body tag. Then set the background color for the div wrapper. Include the width of that wrapper div to be about 800 to 900 pixels or use percents. Use the CSS property, margin: 0 auto; , to center the div wrapper.

    You can then add any other divs as needed for the header, nav menu(s), the text contents, footer, etc., but the basic page only needs the one div.

    Example: http://paynelessdesigns.pastebin.com/Zp7dLHj1

    Ron

  • G Man
    Lv 5
    1 decade ago

    Here is a simple page that does essentially what you are asking for.

    <html>

    <head>

    <style>

    body{ background: green;}

    .page { margin: 0 auto; width: 1016px;}

    .page div { background: white;}

    .left { float: left; width: 50%;}

    .right { float: right; width: 50%;}

    .footer {clear: both}

    </style>

    </head>

    <body>

    <div class='page'>

    <div class='left'>

    column 1

    </div>

    <div class='right'>

    column 2

    </div>

    </div>

    </body>

    </html>

    You can substitute column 1 and column 2 with paragraphs of info, images, whatever.

    If you want to have to have more than two columns, then add another <div class='left'> </div> and <div class='right'> </div> Inside one of the columns. (Essentially divide a columns in half whenever you want more columns). This might seems counter intuitive, but that's the best way to have columns that work in every browser.

  • Angus Fretwell
    1 decade ago

    I couldn't work this out for ages when I first got started with CSS;

    Try experimenting with this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...

    <html xmlns="http://www.w3.org/1999/xhtml%22 xml:lang="en" lang="en">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Web Page</title>

    <style type="text/css">

    body{

    background-color: #999;

    }

    div#wrapper{

    margin: 0 auto;

    width: 500px;

    border: 2px solid #333;

    padding: 10px;

    background-color: #eee;

    font: 13px/20px 'Helvetica', 'Arial', Sans-serif;

    }

    </style>

    </head>

    <body>

    <div id="wrapper">

    <h1>Web Page</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean hendrerit, arcu et lobortis condimentum, ligula lorem tincidunt nunc, et euismod mauris enim et tortor. Etiam non urna eu felis venenatis euismod. Donec mollis adipiscing congue. Integer id semper eros. Sed hendrerit erat a tellus ultricies commodo. Suspendisse vitae mi augue. Duis vel diam eget mi condimentum cursus. Sed blandit, orci non sodales gravida, enim quam varius sapien, eget dictum arcu mauris sit amet felis. Suspendisse mollis justo ut mi ultrices eget cursus leo lobortis. Fusce risus magna, vestibulum et tempor id, luctus quis mi. Donec nec lacus non odio dignissim consectetur at ut mi. Aliquam erat volutpat. Quisque consectetur risus a nisl mattis rhoncus.</p>

    <p>Phasellus bibendum auctor felis nec tristique. Aenean scelerisque purus lobortis felis pulvinar eu hendrerit sem luctus. Nullam a leo nibh, quis vehicula mi. Pellentesque egestas nibh at tortor faucibus posuere eget ut lacus. Donec nec lorem felis. Proin semper, est id ullamcorper dictum, lectus risus iaculis justo, at rutrum nunc ipsum eget massa. Suspendisse venenatis, velit quis dapibus tincidunt, nunc lectus commodo neque, eu pellentesque ante dolor vitae massa. Quisque faucibus metus odio, non iaculis urna. Nam at quam at diam posuere eleifend. Curabitur ut lacus sem</p>

    </div>

    </body>

    </html>

Still have questions? Get your answers by asking now.