html - Request Help: Multiple Boxes -


i having trouble creating multiple boxes future website. css3 coding:

   #content-box1, #content-box2, #content-box3, #content-box4{    padding:10px;    border:1px solid #bbb;    position:absolute;    margin-top:190px;    height:120px;    }     #content-box1 {    margin-left:212px;    width:200px;    }     #content-box2 {    margin-left:444px;    width:200px;    }     #content-box3 {    margin-left:676px;    width:202px;    }     #content-box4 {    margin-left:676px;    width:202px;    } 

here's html:

   <!doctype html>     <html><head>    <meta charset="utf-8">    <title>complex xhtml , css home page layout test</title>    <link href="myflex.css" rel="stylesheet" type="text/css"/>    <style type="text/css">    </style>     <body>     <div id="wrapper">     <div id="header">header</div>     <div id="content-box1"><p>box 1</p></div>    <div id="content-box2"><p>box 2</p></div>    <div id="content-box3"><p>box 3</p></div>     <div id="content-box4"><p>box 4</p></div>     <div id="content">    <div id="content-left">    <p>left column text here. site menu...</p>    <p>menu item</p>    <p>menu item</p>    <p>menu item</p>    <p>menu item</p>    <p>menu item</p>    <p>menu item</p>    </div>    <div id="content-main">    <p>main home page content or image goes here...</p>    </div>    </div>     <div id="footer">footer text , links can go way along here... text text text text        text text...</div>    <div id="bottom"><a title="acuras web development" href="http://www.acuras.co.uk">acuras web       development</a></div>    </div>     <script language="javascript" type="text/javascript">    var gdomain="www.qsstats.com";    var gdcsid="dcs37pv2c00000oun93vypyva_4k6d";    var gfpc="wt_fpc";    var gconvert=true;    var gfpcdom = "cumberlandcountyweather.com";    if ((typeof(gconvert) != "undefined") && gconvert && (document.cookie.indexof(gfpc + "=") ==       -1) && (document.cookie.indexof("wtloptout=")==-1)) {    document.write("<scr"+"ipt type='text/javascript' src='http"+    (window.location.protocol.indexof('https:')==0?'s':'')+"://"+gdomain+"/"+gdcsid+"/wtid.js"+"'>    <\/scr"+"ipt>");    }    function dcsadditionalparameters() {}    </script>     <script type="text/javascript" src="/imageserver/common/webtrends.js"></script>     <noscript><img alt="" border="0" name="dcsimg" width="1" height="1" src="http://www.qsstats.com    /dcs37pv2c00000oun93vypyva_4k6d/njs.gif?dcsuri=/nojavascript&amp;wt.js=no&amp;wt.tv=8.0.2;    wt.qs_dlk=uxr12griz2iaaapmvt4aaaay;" /></noscript>     </body>    </html> 

what attempting do, able create multiple boxes let's first row @ least 3 boxes, second row 3 boxes, , forth. these boxes containing links, , possibly pictures.

can please me in situation?

give boxes common class, e.g. content-box. like:

.content-box {     padding:10px;     border:1px solid #bbb;     height:120px;     width:200px;     float:left; /* key */ } 

start there. idea display them in line floating them. once right edge of container, they'll overflow onto next line. you'll want wrap of content-box elements in single container, can add padding/positioning container put boxes group want them.

remove of by-id css rules, don't need them (e.g. #content-box1, etc).


Comments

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

c++ - wxwidget compiling on windows command prompt -