PDA

Click to See Complete Forum and Search --> : divs side by side

ober
02-09-2005, 11:09 AM
Ok... I need something VERY simple. I just want 2 divs side by side and I want them to be variable in size... so that they fit whatever content goes in them (to a certain degree).

What I've ended up doing in the past is using a "wrapper" div of some sort to accomplish what I want to do and to get them to position correctly. This also lets me do padding and margins around the 2 inside divs. So here is what I have so far:

.ncLRContain {
margin: 6px 50px 6px 50px;
}

.ncleft{
text-align: left;
float: left;
}

.ncright {
text-align: right;
}


But I don't know if that is the best way to do it.

Any suggestions?
toicontien
02-09-2005, 12:32 PM
How about:

<style type="text/css" media="screen">
<!--
#someContainer {
width: 400px;
}

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

.rightBox {
margin-left: 50%;
}
-->
</style>
</head>
<body>
<div id="someContainer">
<div class="leftBox">Stuff goes here</div>
<div class="rightBox">More stuff goes here</div>
</div>
ober
02-09-2005, 12:48 PM
Perfect. I knew there was a simple solution. :cool:
Tasmanian Devil
02-09-2005, 01:31 PM
Is it possible to have one say in the upper right hand corner and and another div to wrap around the corner one to fill the rest of the screen?

Thanks
The Devil
Fantatier
02-09-2005, 02:02 PM
Originally posted by Tasmanian Devil
Is it possible to have one say in the upper right hand corner and and another div to wrap around the corner one to fill the rest of the screen?

Thanks
The Devil

i supose a div inside a div should work for that.
Tasmanian Devil
02-09-2005, 02:04 PM
Where can I find out how to do that? I have never done anything like this.

Thanks
The Devil
Fang
02-09-2005, 02:10 PM
http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm
or this basically:
<div style="width:400px;border:1px solid red;">
<div style="float:right;width:200px;border:1px solid red;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam varius, ante eu tempus ultrices, risus augue sodales eros, at sagittis elit orci et nisl.</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam varius, ante eu tempus ultrices, risus augue sodales eros, at sagittis elit orci et nisl.
Nullam lacus ante, fringilla ut, sagittis sit amet, bibendum at, purus. Praesent lacus justo, facilisis sit amet, fermentum id, placerat quis, mi.
Etiam volutpat. Aenean rutrum, odio in laoreet tincidunt, arcu enim laoreet massa, ut congue pede metus sit amet libero.
Nam placerat, orci in scelerisque sollicitudin, magna urna nonummy leo, at semper lorem elit tincidunt purus. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
Tasmanian Devil
02-09-2005, 02:45 PM
So how do I make the following code to work in the float div?


<left>
<image src="us.base.bmp" width="627" height="426" usemap="#USA"><br>
</left>
<map name="USA">
<area shape="poly" href="/WA1.htm" coords="58,40 111,53 104,95 93,93 66,93 63,93 57,89 49,92 44,85 44,80 35,78 35,52 35,45 54,53 58,40">
<area shape="poly" href="/OR1.htm" coords="104,95 95,153 16,137 17,121 35,78 104,95">
<area shape="poly" href="/CO1.htm" coords="256,185 254,243 172,238 178,181 256,185">
<area shape="poly" href="/CA1.htm" coords="63,147 54,192 110,267 97,293 67,290 67,280 33,253 12,183 14,138 63,147">
<area shape="poly" href="/ID1.htm" coords="111,53 120,54 121,75 131,91 128,106 135,104 143,123 163,126 159,163 125,159 94,153 100,123 98,121 110,103 104,95 111,53">
<area shape="poly" href="/AZ1.htm" coords="172,239 164,321 138,319 97,294 106,263 103,258 116,231 172,239">
<area shape="poly" href="/NM1.htm" coords="242,245 239,316 197,316 198,318 177,316 176,322 164,321 172,239 242,245">
<area shape="poly" href="/NV.htm" coords="125,159 114,243 108,241 108,262 54,192 63,148 125,159">
<area shape="poly" href="/MT1.htm" coords="122,54 188,64 237,66 236,125 164,120 163,125 142,124 134,104 129,106 131,89 120,76 122,54">
<area shape="poly" href="/WY1.htm" coords="235,186 155,179 161,121 235,127 235,186">
<area shape="poly" href="/UT1.htm" coords="178,181 172,239 116,231 125,159 158,164 157,179 178,181 ">
<area shape="poly" href="/ND1.htm" coords="304,67 313,112 235,112 238,67 304,67">
<area shape="poly" href="/SD1.htm" coords="313,112 310,118 316,123 315,161 292,156 235,155 236,112 313,112">
<area shape="poly" href="/NE1.htm" coords="315,161 327,194 330,199 255,200 256,185 233,185 234,155 295,156 315,161">
<area shape="poly" href="/KS1.htm" coords="255,200 318,200 330,199 334,200 332,205 340,213 339,241 332,241 332,243 254,242 255,200">
<area shape="poly" href="/OK1.htm" coords="340,242 345,290 306,289 278,281 277,250 242,250 242,243 340,242">
</map>


Thanks
The Devil
mikepurvis
02-09-2005, 07:58 PM
Easier to just use Dave Shea's css sprites.

Example: http://www.alistapart.com/d/sprites/ala-blobs2.html
Article: http://www.alistapart.com/articles/sprites/

I'm sorry for being unable to directly answer your question, but using the technique above I've managed to avoid having to do imagemaps.
Tasmanian Devil
02-10-2005, 07:56 AM
mikepurvis~
So does it take a long time to rework that so it works like you suggested it does? Can I put text in the blobs or states?

Thanks
The Devil