inherit
Rwy'n hoffi coffi
49511
0
Mar 4, 2021 21:41:56 GMT -8
Anselm
boom
12,182
July 2005
transfermktforum
|
Post by Anselm on Aug 30, 2011 16:48:19 GMT -8
Going to assume this'll go in here... To do with website design, specifically setting up content in 2 columns. 2 columns for content, and I want them to be side by side, something like this: img856.imageshack.us/img856/9684/stuffm.pngSo let's say the container has width of 800px, column 1 is 550px and column 2 is 200px (the rest can be margins). I want column 1 aligned left, column 2 aligned right, next to each other. I've tried position, float, all I can think of... (they're set up as divs) Must be a way to do it that I'm just completely overlooking... |
|
inherit
134992
0
May 26, 2012 2:38:57 GMT -8
SubDevo
Creator of LSD...
3,861
December 2008
subdevo
|
Post by SubDevo on Aug 30, 2011 18:16:44 GMT -8
Try this as a test...
<div style="position: relative; width: 800px; height: 400px; border: 1px solid #000000;">
<div style="position: absolute; left: 0px; height: 300px; width: 550px; border: 1px solid #000000;">
Stuff here
</div>
<div style="position: absolute; right: 0px; width: 200px; height: 200px; border: 1px solid #000000;">
Stuff here
</div>
</div>
|
|
inherit
Rwy'n hoffi coffi
49511
0
Mar 4, 2021 21:41:56 GMT -8
Anselm
boom
12,182
July 2005
transfermktforum
|
Post by Anselm on Aug 31, 2011 2:41:40 GMT -8
Thanks - it's getting the divs in the right place, however still got issues with making the container expand to the height of the content inside. Might that be a bit difficult? There's a footer to add beneath the content too.
|
|
#00AF33
14306
0
1
Sept 8, 2023 8:54:17 GMT -8
Jordan
What is truth?
11,838
October 2003
jab2
|
Post by Jordan on Aug 31, 2011 7:47:53 GMT -8
Try this, and let me know if you want me to explain how it works.
<!DOCTYPE html>
<html>
<head>
<title>Anselm</title>
<style type="text/css">
#body {
width: 100%;
text-align: center;
}
#wrapper {
width: 768px; /* Subtract padding on both sides 800 - (16 * 2 = 32) */
padding: 16px;
margin: 0px auto;
border: 1px solid #000;
text-align: left;
}
#leftColumn {
float: left;
width: 550px;
/* border: 1px solid #FF0000; */
}
#rightColumn {
float: right;
width: 200px;
/* border: 1px solid #FF0000; */
}
#footer {
clear: both;
width: auto;
text-align: center;
}
.leftContainer {
width: auto;
border: 1px solid #000000;
margin-bottom: 16px;
}
.rightContainer {
width: auto;
border: 1px solid #000000;
margin-bottom: 16px;
}
</style>
</head>
<body>
<div id="body">
<div id="wrapper">
<div id="leftColumn">
<div class="leftContainer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et sem orci, vitae ornare est. Etiam sed dapibus risus. Cras lacinia, neque vel congue vehicula, massa libero aliquam nisi, eu lobortis eros justo at arcu. Aliquam euismod commodo porttitor. Proin nibh ligula, semper vitae malesuada eu, ullamcorper eu ipsum. Phasellus id orci non libero auctor mollis. Nam vestibulum risus sed massa condimentum at congue magna ultrices.<br /><br />
Vivamus quis turpis dui, eu varius nisi. Nulla ipsum diam, suscipit in dignissim quis, interdum ac arcu. Vivamus ultricies felis quis sem sodales mattis. Quisque pretium tincidunt semper. Nullam lacinia euismod ornare. Nam aliquet quam a magna facilisis malesuada. Vivamus feugiat lectus ac sem pulvinar consectetur. Curabitur vel lacinia tortor. Fusce odio elit, sodales imperdiet accumsan ut, consequat ut velit. Nulla at lobortis mi.<br /><br />
Donec sapien tortor, sodales non consequat quis, commodo dignissim lorem. Cras porta lorem pharetra tortor consectetur vulputate. In nisl risus, suscipit vitae vehicula eget, commodo vitae risus. Sed dapibus nunc vel mauris ultrices facilisis scelerisque sem venenatis. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer pulvinar posuere venenatis. Morbi eleifend tincidunt sem ac interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In pharetra est nec purus pellentesque eget dictum justo pretium.
</div>
<div class="leftContainer">
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
</div>
</div>
<div id="rightColumn">
<div class="rightContainer">
Fusce ullamcorper, libero vitae porttitor scelerisque, orci ipsum adipiscing nisi, nec rutrum nisl neque eu risus.
</div>
<div class="rightContainer">
In hac habitasse platea dictumst. Fusce faucibus aliquet velit. Integer sed dui quis odio iaculis vulputate eget sodales mauris.
</div>
</div>
<div id="footer">
Copyright © Anselm 2011
</div>
</div>
</div>
</body>
</html>
|
|
inherit
Rwy'n hoffi coffi
49511
0
Mar 4, 2021 21:41:56 GMT -8
Anselm
boom
12,182
July 2005
transfermktforum
|
Post by Anselm on Aug 31, 2011 10:58:56 GMT -8
Problem solved. Thanks  |
|
#00AF33
14306
0
1
Sept 8, 2023 8:54:17 GMT -8
Jordan
What is truth?
11,838
October 2003
jab2
|
Post by Jordan on Aug 31, 2011 14:48:43 GMT -8
You're welcome.
|
|
