Layout Problems

[paulc12@mindspring.com]

This is my first post here. I've used CSS in the past for some text formatting. I am building a new website to replace a table-based design site. I'm trying to use style sheets and not use tables. I'm getting into lots of CSS I've never used before. I have two layout problems and spent lots of time trying to resolve them. Maybe the solution is simple and I just cannot see it. A link is included to an example of the problems.

 

http://home.mindspring.com/~paulc12/example.htm

 

Problem One: I want the Special List (text in green) to align against the left edge of the div under the list on the upper left (red text).

Problem Two: I want the More Important Stuff (in green) to align against the left edge of the div under the list on the lower left (red text).

 

I have tried using Clear in various ways but that pushes the More Important Stuff (green text) past the floated box on the left. Have tried including the top two lists in a div and the bottom two lists in their own div but that doesn't seem to help. Lately I have been asking myself if CSS is really worth it and are tables really that bad? ARGH!

 

Thanks,

Paul

[falkencreative]

Welcome to the forum!

 

To be honest, I'm not completely sure what you are trying to do -- perhaps an image/rough screenshot of the final result might help?

 

It seems like you are trying to set up two columns, so in that case, why don't you do this:

 

<div style="width: 350px;" class="fltlft">
   <ul>
   <li>Maecenas urna purus</li>
   <li>commodo  porttitor</li>
   <li>augue condimentum adipiscing</li>
   <li>ornare risus quis ligula</li>
   <li>Maecenas urna purus</li>
   <li>Maecenas urna purus</li>
   <li>commodo  porttitor</li>
   <li>augue condimentum adipiscing</li>
   <li>Maecenas urna purus</li>
   <li><span style="color: rgb(204, 0, 0);">Want "<strong>Special List</strong>" (to the right) below this list</span></li>
   </ul>

<p><span style="color: rgb(0, 153, 51);"><strong>Special List</strong> - This text needs to be located under the list to the left.</span></p>

[place anything you want to appear in the left column within this div]

</div>
<div style="width: 364px; margin-right: 4px;" class="fltrt">
<ul>
   <li>Maecenas urna purus</li>
   <li>commodo  porttitor</li>
   <li>augue condimentum adipiscing</li>
   <li>ornare risus quis ligula</li>
   <li>Maecenas urna purus</li>
   <li>commodo  porttitor</li>
   <li>augue condimentum adipiscing</li>
</ul>

[place anything you want to appear in the right column within this div]

</div>

[paulc12@mindspring.com]

Welcome to the forum!

 

To be honest, I'm not completely sure what you are trying to do -- perhaps an image/rough screenshot of the final result might help?

 

It seems like you are trying to set up two columns, so in that case, why don't you do this:

 

<div style="width: 350px;" class="fltlft">
   <ul>
   <li>Maecenas urna purus</li>
   <li>commodo  porttitor</li>
   <li>augue condimentum adipiscing</li>
   <li>ornare risus quis ligula</li>
   <li>Maecenas urna purus</li>
   <li>Maecenas urna purus</li>
   <li>commodo  porttitor</li>
   <li>augue condimentum adipiscing</li>
   <li>Maecenas urna purus</li>
   <li><span style="color: rgb(204, 0, 0);">Want "<strong>Special List</strong>" (to the right) below this list</span></li>
   </ul>

<p><span style="color: rgb(0, 153, 51);"><strong>Special List</strong> - This text needs to be located under the list to the left.</span></p>

[place anything you want to appear in the left column within this div]

</div>
<div style="width: 364px; margin-right: 4px;" class="fltrt">
<ul>
   <li>Maecenas urna purus</li>
   <li>commodo  porttitor</li>
   <li>augue condimentum adipiscing</li>
   <li>ornare risus quis ligula</li>
   <li>Maecenas urna purus</li>
   <li>commodo  porttitor</li>
   <li>augue condimentum adipiscing</li>
</ul>

[place anything you want to appear in the right column within this div]

</div>

[paulc12@mindspring.com]

Thank you for taking a look at it. Here is a link to an image file that shows where the text should be positioned. Of course the real webpage will not have the color text, that was my attempt to try and explain what I meant.

 

http://home.mindspring.com/~paulc12/images/example_layout.GIF

 

It seems like this should be really simple to do.

[falkencreative]

ok, got it. You'd need to do something like this...

 

<div id="content-right">
  <h2>Some Stuff</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
  <h4>Header</h4>
  <ul style="float:left; width:350px"><li>list items here...</li></ul>
  <ul style="float:right; width:364px"><li>list items here...</li></ul>

  <p style="clear:both">your content here...</p>

  <ul style="float:left; width:350px"><li>list items here...</li></ul>
  <ul style="float:right; width:364px"><li>list items here...</li></ul>

  <p style="clear:both">your content here...</p>
</div>

 

I imagine you'll need to a change your CSS on #content-right though -- probably removing the margin-left and floating it right.

[paulc12@mindspring.com]

ok, got it. You'd need to do something like this...

 

<div id="content-right">
  <h2>Some Stuff</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
  <h4>Header</h4>
  <ul style="float:left; width:350px"><li>list items here...</li></ul>
  <ul style="float:right; width:364px"><li>list items here...</li></ul>

  <p style="clear:both">your content here...</p>

  <ul style="float:left; width:350px"><li>list items here...</li></ul>
  <ul style="float:right; width:364px"><li>list items here...</li></ul>

  <p style="clear:both">your content here...</p>
</div>

 

I imagine you'll need to a change your CSS on #content-right though -- probably removing the margin-left and floating it right.

[paulc12@mindspring.com]

Thanks. I gave that a try and it has some problems. Here is a link to the tweaked webpage.

http://home.mindspring.com/~paulc12/example2.htm

I tried floating content-right to the right and there were some position problems.

[paulc12@mindspring.com]

I was able to get the layout to work but used tables to assist. Here is a link to the example webpage.

http://home.mindspring.com/~paulc12/example3.htm

 

I am torn about using tables since I am trying to get away from using tables for layout. Would prefer to get it to work with CSS.

[falkencreative]

No, you don't need to use tables. After looking at your example 2, you need to:

 

-- make #content-right float right, remove the left-margin, and give it a width (obviously a width that will allow it to fit next to the left column

-- add "clear:both" to the #footer

-- adjust the widths of the left/right <ul> columns. They aren't appearing correct because they are too wide -- in addition to the width set within "style=''" they have a default left padding applied to them by the browser, so you would either need to remove that padding or make the width less to compensate. It may require some experimentation to figure out the exact widths you need.

[falkencreative]

Figured it might be easier to give you the exact code... One thing I would keep in mind -- I have only tested this on Firefox, so you probably should make sure this works in other browsers as well. I general, I usually suggest avoiding setting a width/height and using margins/padding on the same element since that often can reduce browser compatibility issues.

 

Also, keep in mind that IE6 has a doubled margin bug on floated elements (http://www.positioniseverything.net/explorer/doubled-margin.html) which you may run into on this layout, since it looks like your left content column is floated and has margins.

 

<!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>Example of problems</title>
<style type="text/css">
<!--
body {
font: Arial, Helvetica, sans-serif;
   margin: 0px; 
padding: 0px;
text-align: center; 
color: #404040;
background-color: #c9c19f;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
h1, h2, h3, h4, h5, h6 {
   font-family: Arial, Helvetica, sans-serif;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear: both;
   height: 0px;
   font-size: 1px;
   line-height: 0px;
}
.clear { 
clear: both;
}
#container {
width: 992px;
background-color: #fff; /* the auto margins (in conjunction with a width) center the page */
border: 0px; /* this overrides the text-align: center on the body element. */
margin: 0px auto 0px auto;
text-align: left;
}
#header {
background-color: #9CF;
width: 982px;
height: 100px;
color: #FFF;
font-size: 16px;
font-weight: bold;
padding-top: 10px;
padding-left: 10px;
}
#leftcolumn {
background-color: #CCF;
   float: left; /* since this element is floated, a width must be given */
   width: 180px;
   margin: 10px 0px 0px 10px;
   padding: 10px;
}
#content-index {
background-color: #fff;
margin: 2px 214px 20px 214px;
padding: 0px 20px 0px 20px;
}
#content-right {
background-color: #fff;
   float: right;
margin: 2px 0px 20px 0;
   padding: 0px 20px 2px 20px;
   width:740px;
}
#footer { 
padding: 6px;
text-align: center;
   font-size: 12px;
background: #CCF;
   color: #339;	
   clear:both;
}
-->
</style>
</head>

<body class="twoColFixHdr">
<div id="container">
<div id="header">
Header
</div><!-- end #header -->

<div id="leftcolumn">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio tristique purus a augue condimentum adipiscing.</p>

<p>Lorem ipsum dolor sit amet, Maecenas urna purus, fermentum id, convallis luctus rutrumconsectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, at nonummy quam  ante ac quam. Maecenas urna purus, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div><!-- end #leftcolumn -->

<div id="content-right">
<h2>Some Stuff</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

<h4>A Longer List than the one to the right</h4> 

   <ul style="float:left; width:320px;">
   <li>Maecenas urna purus</li>

   <li>commodo  porttitor</li>
   <li>augue condimentum adipiscing</li>
   <li>ornare risus quis ligula</li>
   <li>Maecenas urna purus</li>
   <li>Maecenas urna purus</li>
   <li>commodo  porttitor</li>

   <li>augue condimentum adipiscing</li>
   <li>Maecenas urna purus</li>
   <li><span style="color: #C00;">Want "<strong>Special List</strong>" (to the right) below this list</span></li>
   </ul>

   <ul style="float:right; width:334px;margin-right:4px;">
   <li>Maecenas urna purus</li>

   <li>commodo  porttitor</li>
   <li>augue condimentum adipiscing</li>
   <li>ornare risus quis ligula</li>
   <li>Maecenas urna purus</li>
   <li>commodo  porttitor</li>
   <li>augue condimentum adipiscing</li>

</ul>

<p style="clear:both"><span style="color:#093;"><strong>Special List</strong> - This text needs to be located under the list to the left.</span></p>

   <ul style="float:left; width:320px;">
   <li>Maecenas urna purus</li>
   <li>commodo  porttitor</li>
   <li>augue condimentum adipiscing</li>

   <li>Maecenas urna purus</li>
   <li>ornare risus quis ligula</li>
   <li>Maecenas urna purus</li>
   <li>ornare risus quis ligula</li>
   <li><span style="color: #C00;">Want "<strong>More Important Stuff</strong>" (below) to be right below this list and not run past the floated div on the left</span></li>

   </ul>

   <ul style="float:right; width:334px;margin-right:4px;">
   <li>Maecenas urna purus</li>
   <li>commodo  porttitor</li>
   <li>augue condimentum adipiscing</li>
   <li>Maecenas urna purus</li>

   <li>commodo  porttitor</li>
   <li>augue condimentum adipiscing</li>
   </ul>

<p style="clear:both"><span style="color:#093;"><strong>More Important Stuff</strong>: 
I want this text up below the last list on the left. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</span></p>
</div><!-- end #content-right -->

<div id="footer">
Footer
</div><!-- end #footer -->

</div><!-- end #container -->
</body>
</html>

[paulc12@mindspring.com]

Thank you for the help. This has given me some things to think about. When you suggested avoiding setting a width/height and using margins/padding on the same element, can you tell me which element you were referring too? I am so new to this much CSS my head is spinning. When I view the webpage with the revised code it does look a lot better. The bullets are missing from the LI's but I can probably run that down. I am viewing the page in IE7. I can also check it in IE8 on another computer. Unfortunately I don't have a computer with IE6 to check it. I bought DWCS4 a couple months ago and it keeps giving me messages all over the place regarding the doubled margin bug, so I probably have a lot of problems to fix. Thanks for the link that helps show the issue. Have you used Browsershots before? I was planning on trying that after I get a little further. Thanks!

[falkencreative]

When you suggested avoiding setting a width/height and using margins/padding on the same element, can you tell me which element you were referring too?

I was specifically thinking about #leftcolumn, but you have quite a few elements like this.

 

For browser checking, I usually use MultipleIEs (http://tredosoft.com/Multiple_IE) though there are also other options like IETester (http://www.my-debugbar.com/wiki/IETester/HomePage) or Adobe's BrowserLabs (https://browserlab.adobe.com/en-us/index.html). Ideally though, if you want to ensure that what you are seeing in the browser is exactly what the user is seeing, you really have to run multiple virtual machines and check each separately. http://stackoverflow.com/questions/574463/running-ie6-ie7-and-ie8-on-the-same-machine

[paulc12@mindspring.com]

Thanks for your help and suggestions, I will check the links out. Overall I am having a hard time understanding what is the best way to locate elements precisely where you want them on the page (including the padding for text) without setting a width and using margins/padding on the same element. I've been reading several CSS books and have run through tutorials, and I know there is a lot more to learn. The books only seem take you so far.

[falkencreative]

I am having a hard time understanding what is the best way to locate elements precisely where you want them on the page (including the padding for text) without setting a width and using margins/padding on the same element.

I'm not saying you can never do this, just that it may cause cross browser issues and you want to make sure to test different browsers (I'd suggest IE6-8, Firefox and Safari).

 

In regards to your actual question, I usually handle this by setting a width on the outer element and adding padding to inner elements. For example, say I want to have a div that was 300px wide and had a interior padding of 30px:

 

<div class="colLeft"><ul><li>List item</li></ul></div>

 

.colLeft { width:300px; }

.colLeft ul { padding: 30px; }

[paulc12@mindspring.com]

Thanks for the suggestions on which browsers to test with. That is the same list I was thinking of.

 

Also, thanks for the advice on setting a width on the outer element and adding padding to inner elements. That sounds like a good approach and I will give it a try!

[paulc12@mindspring.com]

Here is a revised version of the webpage I was having trouble with. http://home.mindspring.com/~paulc12/example4g.htm This version is better than the original and looks good in IE7.

 

In DWCS4, in the Design window and Live View, there is additional space appearing above the 'Some Stuff' heading and after each of the last LI's. The extra spaces are not present in IE7. The inconsistencies are sure frustrating.

[newseed]

You don't use the editor's design view because it's really not a browsers. No editor will show it like the browsers.

[falkencreative]

In DWCS4, in the Design window and Live View, there is additional space appearing above the 'Some Stuff' heading and after each of the last LI's. The extra spaces are not present in IE7. The inconsistencies are sure frustrating.

You unfortunately can't entirely trust Dreamweaver's live view. The live view has gotten a lot better, especially compared to earlier versions of Dreamweaver, but it's intended as a guide only -- your site should be tested in the actual browsers. I believe the live view emulates Chrome/Safari (WebKit based browsers) not IE.

[paulc12@mindspring.com]

Ok, thank you.