No replies
t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 6 years 41 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

Greetings:

I have kind of been going at things my own way for a while. And generally end up positioning container elements absolutely with container positions relevant to a master container.

It has worked with stability gained by setting margins in the embedded divs.

I read some stuff here that is making me rethink my strategy.

I tried a departure from my usual methods and would like to know if you see any holes in this strategy.

Thanks so much in advance. I have checked it from Firefox to Safari to Opera to IE 6, 7 and 8 to my iphone without a hitch.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style>
 #container
{
margin: 0 auto;
width:800px;
border-style:solid;
border-color:#F00;
}
 
 .header
{
width:700px;
margin:10px auto;
text-align:justify;
border-style:solid;
border-color:black;
}
 
 .left_column
{
display:inline;
float:left;
width:400px;
margin:0 0 0 48px;
text-align:justify;
border-style:solid;
border-color:black;
}
 
 .text_one
{
padding:10px;
text-align:justify;
}
.right_column
{
float:right;
width:280px;
margin:0 48px 0 0px;
border-style:solid;
border-color:black;
display:inline;
}
 
 #footer
{
display:inline-block;
width:700px;
margin:10px 50px;
text-align:justify;
border-style:solid;
border-color:black;
}
 
 
</style>
<!-- all style declarations above this line -->
 
</head>
 
<body>
<div id = "container">
	<div class = "header"><div class = "text_one">HEADER:<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales dignissim velit, a varius sapien suscipit tempor. Quisque viverra nisl eu risus tempus auctor. In ut venenatis odio. Maecenas vitae lacus id felis hendrerit aliquam. Etiam sagittis dignissim rutrum.    </div></div>
 
<div class = "left_column"><div class = "text_one">LEFT COLUMN:<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales dignissim velit, a varius sapien suscipit tempor. Quisque viverra nisl eu risus tempus auctor. In ut venenatis odio. Maecenas vitae lacus id felis hendrerit aliquam. Etiam sagittis dignissim rutrum. Donec luctus porttitor fringilla. Praesent suscipit eleifend tortor, non vestibulum velit rhoncus in. Vivamus ligula nisl, pretium at lacinia sed, malesuada pretium lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sit amet nisl vitae nulla tempus facilisis. In fringilla porttitor tincidunt. Integer laoreet malesuada lacus nec rutrum. Nam ultricies posuere ipsum sit amet accumsan. In eget arcu libero. Aliquam mi orci, sollicitudin eget porttitor eu, viverra quis libero. Nulla posuere massa non sem placerat nec consequat orci ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam id neque a diam bibendum tempor. Vivamus laoreet, turpis in tristique elementum, enim mauris molestie erat, ac pretium nibh odio eget dolor. Nam lacinia mauris id metus euismod mattis feugiat lorem vestibulum.luctus porttitor fringilla. Praesent suscipit eleifend tortor, non vestibulum velit rhoncus in. Vivamus ligula nisl, pretium at lacinia sed, malesuada pretium lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sit amet nisl vitae nulla tempus facilisis. In  
 
 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam id neque a diam bibendum tempor. Vivamus laoreet, turpis in tristique elementum, enim mauris molestie erat, ac pretium nibh odio eget dolor. Nam lacinia mauris id metus euismod mattis feugiat lorem vestibulum.luctus porttitor fringilla. Praesent suscipit eleifend tortor, non vestibulum velit rhoncus in. Vivamus ligula nisl, pretium at lacinia sed, malesuada pretium lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sit amet nisl vitae nulla tempus facilisis. In   Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam id neque a diam bibendum tempor. Vivamus laoreet, turpis in tristique elementum, enim mauris molestie erat, ac pretium nibh odio eget dolor. Nam lacinia mauris id metus euismod mattis feugiat lorem vestibulum.luctus porttitor fringilla. Praesent suscipit eleifend tortor, non vestibulum velit rhoncus in. Vivamus ligula nisl, pretium at lacinia sed, malesuada pretium lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sit amet nisl vitae nulla tempus facilisis. In  
 
</div></div>
 
<div class = "right_column"> 
	<div class = "text_one"> RIGHT COLUMN:<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales dignissim velit, a varius sapien suscipit tempor. Quisque viverra nisl eu risus tempus auctor. In ut venenatis odio. Maecenas vitae lacus id felis hendrerit aliquam. Etiam sagittis dignissim rutrum. Donec luctus porttitor fringilla. Praesent suscipit eleifend tortor, non vestibulum velit rhoncus in. Vivamus ligula nisl, pretium at lacinia sed, malesuada pretium lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sit amet nisl vitae nulla tempus facilisis. In  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales dignissim velit, a varius sapien suscipit tempor. Quisque viverra nisl eu risus tempus auctor. In ut venenatis odio. Maecenas vitae lacus id felis hendrerit aliquam. Etiam sagittis dignissim rutrum. Donec luctus porttitor fringilla. Praesent suscipit eleifend tortor, non vestibulum velit rhoncus in. Vivamus ligula nisl, pretium at lacinia sed, malesuada pretium lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sit amet nisl vitae nulla tempus facilisis. In  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales dignissim velit, a varius sapien suscipit tempor. Quisque viverra nisl eu risus tempus auctor. In ut venenatis odio. Maecenas vitae lacus id felis hendrerit aliquam. Etiam sagittis dignissim rutrum. Donec luctus porttitor fringilla. Praesent suscipit eleifend 
</div>
</div>
 
<div id = "footer"><div class = "text_one">FOOTER:<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales dignissim velit, a varius sapien suscipit tempor. Quisque viverra nisl eu risus tempus auctor. In ut venenatis odio. Maecenas vitae lacus id felis hendrerit aliquam. Etiam sagittis dignissim rutrum. Donec luctus porttitor fringilla. Praesent suscipit eleifend tortor, non vestibulum velit rhoncus in. Vivamus ligula nisl, pretium at lacinia sed, malesuada pretium lectus.</div></div>
 
</div>	
</body>
</html>