|
CSS - Tables In A Css Layout. Problem...
I'm using what seems to be called a "liquid two column" CSS layout. Its a main column of 100% width left padding the width of the side bar. In the main column, I need to use table, but I'm stumpt on how to insure it doesn't extend beyond the right edge of the main column div. Can this be done?
Since the side column is 200px, the main column has a left margin of 200px. So this means a table with a width of 100% actually extends 200px past the right edge of the main column. Playing with the right margin of the table seems to be the right direction, but just not sure how to make the table fill the space right, and work the same in bot FF and IE. Any ideas? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
#container
{
width: 100%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#leftnav
{
float: left;
width: 250px;
margin: 0;
padding: .5em;
}
#content
{
margin-left: 250px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}
#leftnav p { margin: 0 0 1em 0; }
.testTable {
border: 1px solid gray;
margin-right: -283;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="leftnav">
<p>
Side Column
</p>
</div>
<div id="content">
Stuff Here
</p>
<table class="testTable"><tr><td>eeee</td></tr></table>
<p>
Stuff Here
</p>
</div>
</div>
</body>
</html>
[edit] The purpose of the table will be to display row data from a DB. Similar TutorialsSo I've decided to go the 'pure css' route other than my tables for tabular database content. I had most of the 'positioning' finalized when I ran into a huge trouble . . . how to make a border image repeat and place it properly. After getting frustrated with the border, I decided to use one simple table just to get the borders correct. Everything was fine there even though I didn't want to give in to the table temptation. That is until I tried to add my suckerfish dropdown and have it centered. So now I'm stuck. My site is turning into a table based site and I'm really annoyed that I can't fix it myself. I've had trouble with coding before, but I always manage to fix it myself. Can somebody please point me in the right direction? I've been searching these forums and the web for 2 days and not a single example can be fine tuned into my solution. [edit] p.s. I know the css and html is a mess right now. I'm going to clean it all up once I get something working =/ http://www.mytreetv.com/showcase/index.php css Thank god I'm doing this site for free as a favor to a friend of the family instead of a paying job. I just changed my website layout from just tables to CSS but theres a few problems, nested tables dont stop at the border of the containing table they hover over them, and one of the tables that was meant to be another column moved out of the table altogether heres the site before and after i edited it: Before After I was told to divide it up like this Code: <body> <div id="wrapper"> <div id="header">Header</div> <div id="body"> <div id="nav">Nav</div> <div id="content">Content</div> </div> <div id="footer">Footer</div> </div> </body> Can anyone see what the problem is? This was formerly another post. Making progress and almost there. I have a website under develepoment... My site I have 4 problems. 1. and most important in IE but not in FF the bgimage is showing through the margin or padding, im not sure which of the last image being displayed.. How do I get that out of there. Comes across as a red line after my top gutter. 2. The banner image and gutter images seem to move over to the right by 1px in both browsers. 3. How do i get the left container div to go all the way down the page. 4. How do i get the secondary navigation in the footer to align with the centercontent div and the rightcontent div but not the left content div. any help would be appreciated... Everytime I think I am getting the hang of CSS -- for simple pesonal homepages, etc -- they still always seem to get the worse on me. I am trying to generate a moderately simple page with title, prelude, menu (as per a table) with menu, content and comment box, followed by a quick sumary, etc. I seem to be having troubles getting the three -- menu, content & comment boxes -- to size correctly. I have a surounding box (by a div) for them, but they do not seem to entirely follow/use it as their parent... If I set them to top:0, it is the top of the window frame, but otherwise they seem to position within their more local parent div. Ultimately, I am striving to get into this CSS way of 'life', but it is very difficult as I am working mainly alone. I do have books but perhaps I am not seeing the info entirely correct... Perhaps some of you chaps/gurus can help me here. I have recently gathered that "html" is or should be used in the CSS file too...? Looking for help. My current (broken) home page can be accessed via: "dgringo.homeip.net/~dgringo/index.shtml" Here is the code and the CSS file: <head> <title>...</title> <script language="JavaScript" type="text/javascript" src="main.js"></script> <link rel="stylesheet" href="entry.css" type="text/css" /> </head> <body> <h1>Me (iMac's) Web-space</h1> <div id="prelude"> <!--#include virtual="includes/header.incl" --> </div> <table id="main"> <tr> <td id="menu"> <!--#include virtual="includes/menu.incl" --> </td> <td id="content"> <!--#include virtual="includes/body.incl" --> </td> <td id="topics"> <p> <!--#include virtual="includes/topic1.incl" --> </p> <p> <!--#include virtual="includes/topic2.incl" --> </p> </td> </tr> </table> <div id="footer"> <!--#include virtual="includes/footer.incl" --> </div> <div class="adendeum"> Last updated <!--#echo var="LAST_MODIFIED" --><br /> </div> </body> </html> ------------- The CSS file now follows: a:link {text-decoration:none;color: black;} a:visited {text-decoration:none;color: black;} a {color: black;} a:hover {text-decoration:underline;color: silver;} body { color: #000000; background: #669999; } h1 { text-align: center; } #prelude { width: 80%; background-color: #CCCC99; margin-left: auto; margin-right: auto; padding-top: 3px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; text-align: center; } #main { display: block; width: 100%; border: silver dotted; height: 16em; } #main td { border: dashed; } #menu { position: absolute; width: 20%; left: 2%; } #content { position: absolute; left: 23%; width: 50%; } #topics { position: absolute; left: 74%; width: 20%; } p:first-line { color: gray; background-color: green; } #footer { text-align: center; width: 80%; background-color: #CCCC99; margin-left: auto; margin-right: auto; padding-top: 3px; padding-left: 10px; padding-bottom: 3px; padding-right: 10px; } .adendeum { font-weight: lighter; color: gray; text-align: center; } I would appreciate any advise as to whether this degrades properly as the browser is narrowed. I didn't post this in the "critique" forum because my only concern (right now) is related to CSS. There is a separate style sheet for handhelds, so if you have one I would appreciate a look from there also. Most links are still inactive. Liquid design TIA, Rob Hello there, at the moment I have this CSS which I apply to a table cell by <a class='menulink' href='etc etc' Code: A.menulink {
TEXT-DECORATION: none;
display:block;
width:138px;
BACKGROUND-COLOR: #666666;
padding: 0px;
}
A.menulink:link {
TEXT-DECORATION: none;
display:block;
width:138px;
BACKGROUND-COLOR: #666666;
padding: 0px;
}
A.menulink:visited {
TEXT-DECORATION: none;
display:block;
width:138px;
BACKGROUND-COLOR: #666666;
padding: 0px;
}
A.menulink:active {
TEXT-DECORATION: none;
display:block;
width:138px;
BACKGROUND-COLOR: #666666;
padding: 0px;
}
A.menulink:hover {
TEXT-DECORATION: none;
display:block;
width:138px;
BACKGROUND-COLOR: #000000;
padding: 0px;
}
The problem I have is with the width:138px. If I apply this class to a cell that isn't 138px, it automatically goes that size. And if I delete the width:138px lines, then the class only works when you go over the word, not when you hover over the cell. So does anybody know how to change the CSS so that a width doesn't have to be defined so that I can apply the class to any size cell? Thanks i have nested tables but table inside is inheriting properties from table outside. i have written classes for both tables in css and i dnt want inside table to inherit. what can i do? I have a problem with positioning elements on a page. It is no problem to position everything (text, header, logo's, banners) but somehow the div or table that contains the content of page does not grow when the contents do (it's the div/table with the white background). It is no problem to position everything exactly including the background table but then when the text grows longer the table or div ( I tried both and both give the same problem ) does not grow longer so part of the text is not readable anymore. Wierd thing is that when I only give the main div positions and not the text and images the div will adapt to it's contents but then I can't position my header as I want to. The page is located here and the css is attached to this post as a txt file. What did I overlook? I've searched the internet but I can't find anything. This is probably a common question for Css, and I know it's a novice one too, but no matter where I've searched I cannot find a straight answer. Ok, I'm using CSS to layout my page, and I have a big logo at the top that's like 750x150 or something close to that. Looks fine in 800x600 but in the higher resolutions, you guessed it, tonnes of white space. I do not want to center it like people suggest, I want the header to touch both ends of the page, no matter what the resolution. I've used basic CSS styles, like #top {position: absolute; top:0px; left:0px;} for the logo. How would I change that so it will stretch for bigger resolutions?? Thanks Please have a look in the attached example: the layout works fine (after some testing) in Mozilla. My problem is that the navigation breaks after the fourth button in IE. If i give a width to the list than the whole navigation breaks after the content at the left side. Anyone with some advice? Ok, this is my first time creating a layout using div tags and I'm having trouble setting the footer to stay at the bottom. example From the example above, I want to footer to sit below the menu. I can't seem to get this to work. Here's my code. Code:
body {
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
background-color:white;
}
#header {
height:50px;
background-color:#0755AB;
text-align: center;
}
#content {
width:100%;
height:200px;
margin:0px 0px 0px 150px;
background-color:#008080;
text-align: center;
}
#menu {
position:absolute;
top:50px;
left:0px;
width:150px;
height:300px;
background-color:#FF9F9F;
text-align: center;
}
#footer {
height:30px;
background-color:gray;
text-align: center;
position: relative;
}
Hello, I'm having issues with a new layout in IE 6. The HTML is as follows: Code: <div id="gsContainer">
<div id="gsLeftBorder"></div>
<div id="gsRightBorder"></div>
<div id="gsContent">
<div id="gsHeader">Heading</div>
<div id="gsBox">
Some content
</div>
</div>
</div>
The CSS is as follows: Code: #gsContainer {
position: relative;
width: 795px;
height: 185px;
margin: 0 0 15px 0;
padding: 0px;
}
#gsLeftBorder {
float: left;
position: relative;
margin: 0px;
padding: 0px;
width: 4px;
background-image: url(/images/Left.gif);
background-repeat: no-repeat;
height:185px;
}
#gsRightBorder {
position: relative;
float: right;
margin: 0px;
padding: 0px;
width: 4px;
background-image: url(/images/GreenRight.gif);
background-repeat: no-repeat;
height:185px;
}
#gsContent {
position: relative;
height: 185px;
margin-left: 4px;
margin-right: 4px;
width:779px;
padding: 0px;
}
#gsHeader {
position: relative;
height: 25px;
margin: 0px;
padding: 6px 0 0 10px;
width:769x;
color: #fff;
font-size: 14px;
font-family: arial;
font-weight: bold;
background-image: url(/images/Header.gif);
background-repeat: repeat-x;
}
#gsBox {
position: relative;
height: 129px;
margin: 0px;
padding: 25px 5px 0px 31px;
width:743px;
color: #000;
font-size: 11px;
font-family: verdana;
background-image: url(/images/Back.gif);
background-repeat: repeat-x;
}
The display looks fine when I test in IE 7, FF2, and Safari, with the content appearing with a clean "header" on top, and some inner content with borders on the left & right side. However, when viewing in IE6, the inner content (div "gsContent") is somehow too wide, and is pushed to the live after the "gsContainer" div. When I play with the widths, if I shave 8px of width off gsContent and its inner divs, then the alignment is fixed, but there is spacing between gsLeftBorder & gsContent as well as gsContent & gsRightBorder Any ideas how I can resolve this? I've built a site for a client using a header, middle and footer. The middle is divided into content and nav. For some reason the nav drops below the content div in IE, but positions properly in FF. Could someone please help! The next step for me is to re-code the entire site and I really don't want to have to do that. http://www.cvp.jp/about.html Thank you in advance for your time and help. http://www.research.buffalo.edu/newsite/ If I go to the above page in Firefox the page always loads fine. However, if I go to it in IE 6 the right side div half the time loads incorrectly and is not positioned to the right. If i hit refresh then the page looks correct. This error happens the most when I'm coming from another page and click the home button to get back to the above link. I've also noticed this happening on http://www.research.buffalo.edu/newsite/proposal_library.cfm Both pages validate correctly. Is there something I'm missing? Some kind of hack to make it work in IE? Hi I'm trying to layout some information on a page that would previously have been designed using a table structu Code: <table>
<tr>
<td>Item 1
<br />
Item 2
<br />
Item 3</td>
</tr>
<tr>
<td>Item 1
<br />
Item 2
<br />
Item 3</td>
</tr>
</table>
But now have tried to redesign the layout using the following CSS: Code: #boxProdDisplay
{
width:500px;
padding:0;
margin:0;
}
#boxProdDisplay p
{
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p1
{
float:left;
clear:left;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p2
{
float:left;
clear:left;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p3
{
float:right;
clear:right;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p4
{
float:right;
clear:right;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
The problem is that it doesn't quite display correctly. The <P> elements are floated correctly, but they only appear after the last <P> tag which has been aligned left. With a table structure I could use valign to send everything to the top of the page. What can I do here? Many Thanks. Hi, I'm having trouble creating a top bar and below this 3 column layout. IE 5.5 takes note of the widths specified, firefox does not. In fact firefox seems to treat the center and right column divs as though have been asked to display: block as soon as content is placed within the left column, even overlapping into the header div above it when padding or a margin is added. I'm wondering if I am using the DTD tag? Or is it the fact that I am css-ing the layout wrongly? See page layout here Code: <!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" xml:lang="en" lang="en"> <head> <title>This is really beginning to annoy me!</title> <meta http-equiv="expires" content="-1" /> <meta name="robots" content="no-index" /> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> </head> <body> <div id="ContentBox"> <div class="logo"><img src="" alt="a logo here" title="" class="logo" /></div> <div id="mainmenu"><div class="blulinetop"></div>menu here<div class="blulinebot"></div></div> <div id="leftSide"> Quick Navigation <form><p></p></form> <img src="" border=0 alt="" /> <ul class="prodsnav"> <li class="prodsnav"><img src="gifs/bullet_c.gif" alt="/" title="/" class="prodNav" /> Nav LInk 1</li> <li class="prodsnav"><img src="gifs/bullet_c.gif" alt="/" title="/" class="prodNav" /> Nav Link 2</li> </ul> </div> <div id="centerSide">Center column</div> <div id="rightSide">righthand column</div> </div> </body> </html> ...the CSS Code:
body {
margin:0px 0px;
padding:0px;
text-align:center;
background-color: #fff;
font-family: arial, sans serif;
font-size: x-small;
font-style: normal;
font-weight: 400;
}
#ContentBox {
width:810px;
height: 100%;
margin:0 auto;
text-align:left;
padding:0px;
border: 1px solid #c2dacd;
background-color:#fff;
vertical-align: top;
}
#leftSide {
width: 166px;
height: 99%;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #003399;
margin: 0;
padding-top: 24px;
display: inline;
vertical-align: top;
background-color: #f00;
}
#centerSide {
width: 450px;
height: 99%;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #003399;
margin: 0px;
padding: 0px;
display: inline;
vertical-align: top;
background-color: #0f0;
}
#rightSide {
width: 177px;
height: 99%;
border: 0;
margin: 0px;
padding: 0px;
display: inline;
vertical-align: top;
background-color: #00f;
}
div.logo {
width: 100%;
height: 50px;
background-color: #c2dacd;
padding: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
vertical-align: left;
display: block;
}
#mainmenu {
height: 28px;
width: auto;
vertical-align: top;
padding: 0px;
display: inline;
border: 0;
font-size: 1px;
background-color: #0f0;
}
div.blulinetop {
width: 100%;
height: 2px;
border: 0;
background-color: #003399;
margin-top: 2px;
margin-bottom: 2px;
font-size: 1px;
vertical-align: top;
}
div.blulinebot {
width: 100%;
height: 2px;
border: 0;
background-color: #003399;
margin-top: 0;
margin-bottom: 0;
font-size: 1px;
vertical-align: top;
}
/* products nav */
ul.prodsnav {
display: block;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding: 0;
list-style-type: none;
}
li.prodsnav {
padding: 4px;
margin-top: 0;
margin-right: 2px;
margin-bottom: 2px;
margin-left: 2px;
height: 18px;
width: 165px;
border-right-color: #999;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: #999;
border-bottom-style: solid;
border-bottom-width: 1px;
}
img.prodNav{
display: inline;
}
What to do? un-Wizeone today Im tying to have a simple layout with a floating box in the lower right corner. As it is now the floating box is in the top right corner of the body of the box. I just can not get it to look right in the lower right section. Click here. this is a pic of how it looks now Here is the code for the layout CSS Code:
/* main box */
.faq-def-block {
position: relative;
left: 30px;
width: 500px;
background-color: #FFFFCC;
border: 1px solid #000000;
-moz-border-radius: 0px 0px 8px 8px;
color: #000000;
font-size: 12px;
}
/* top line*/
.faq-def-block-header {
border-bottom: 1px solid #000000;
background-color:#FFCC66;
padding: 0 0 0 2px;
}
/* floating box */
.faq-def-block-footer {
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
width: 60px;
float: right;
text-align: center;
background-color:#FFCC66;
-moz-border-radius: 0px 0px 0px 8px;
}
/* body text
.faq-def-block-body {
padding: 0 0 0 6px;
}
HTML Code:
div class="faq-def-block">
<div class="faq-def-block-header">Climatic Wind Data for the United States through 1996 Publication</div>
<div class="faq-def-block-body">
<div class="faq-def-block-footer">
<a href="http://www5.ncdc.noaa.gov/documentlibrary/pdf/wind1996.pdf" target="_blank">
<img src="../images/download-icon.gif"
alt="Climatic Wind Data for the United States through 1996"
width="50"
height="50"
border="0"></a><br>
Download<BR>
PDF<br>
(102KB)
</div>
Climatic wind data in this summary were extracted from the NCDC's Edited Local
Climatological Data publication, Air Force and Navy climatic briefs, and other
sources. The total period of this summary is 1930-1996, though the period of record
(POR) for which wind data is summarized varies for individual locations, and may begin
and end at any time during the 1930-1996 period. Wind summaries from a total of 321 stations
from all U.S. states are presented. The wind elements summarized by month and overall annual
values include prevailing wind directions (given in compass points), mean wind speeds, and
either peak gusts (in miles per hour), fastest-mile, or highest 5-second winds. Peak wind
types may be combined to reflect the highest reported wind. Updated wind data for many sites
can be obtained from the post 1996 Edited Local Climatological Data - Annual publications.<br>
</div>
</div>
Thanks Tekjock Hi! Am new here, been doing CSS for a few months now, had a few problems here and there, but overall, is going well I have done this website homepage so far : http://www.moretonhallglass.com/cross/ It works fine on all browsers, except 1! which is IE 6. I have read into bugs for this but have been unable to fix it as yet. The problem is that the middle picture with the painting and descripton it seems to have a break at the top of it and pushes it down the page, have tried all sorts to fix it in the CSS code, but to no avail yet. Anyone know how to fix it? Thanks for your help HTML : Code: <!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=ISO-8859-1" />
<title>Daisy Cross</title>
<script type="text/javascript">
<!--
function swap(img, ref) {
if (document.images) { document[img].src = ref; }
}
-->
</script>
<!--[if IE]>
<style>
.item {
margin: 5px;
padding: 10px;
}
</style>
<![EndIf]-->
<link rel="stylesheet" type="text/css" href="css/text.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
</head>
<body>
<div id="container">
<div id="header">
<img src="images/top.jpg" width="940" height="129" border="0" alt="Daisy Cross" />
</div>
<div id="mid" style="display: inline;"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="images/dcross_01.jpg" width="940" height="24" border="0" alt=""></td>
</tr><tr>
<td><img src="images/dcross_02.jpg" width="545" height="135" alt=""></td>
<td><a href="#" onmouseover="swap('mid1','images/dcross2_03.jpg')" onmouseout="swap('mid1','images/dcross_03.jpg')"><img name="mid1" src="images/dcross_03.jpg" width="194" height="135" border="0" alt=""></a></td>
<td><a href="#" onmouseover="swap('mid2','images/dcross2_04.jpg')" onmouseout="swap('mid2','images/dcross_04.jpg')"><img name="mid2" src="images/dcross_04.jpg" width="201" height="135" border="0" alt=""></a></td>
</tr><tr>
<td colspan="3"><img src="images/dcross_05.jpg" width="940" height="136" border="0" alt=""></td>
</tr><tr>
<td colspan="3"><img src="images/dcross_06.gif" width="940" height="10" border="0" alt=""></td>
</tr>
</table></div>
<div id="content-container">
<div id="content">
<br />
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="#" onmouseover="swap('nav1','images/nav2_01.gif')" onmouseout="swap('nav1','images/nav_01.gif')"><img name="nav1" src="images/nav_01.gif" width="130" height="32" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav2','images/nav2_02.gif')" onmouseout="swap('nav2','images/nav_02.gif')"><img name="nav2" src="images/nav_02.gif" width="130" height="31" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav3','images/nav2_03.gif')" onmouseout="swap('nav3','images/nav_03.gif')"><img name="nav3" src="images/nav_03.gif" width="130" height="30" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav4','images/nav2_04.gif')" onmouseout="swap('nav4','images/nav_04.gif')"><img name="nav4" src="images/nav_04.gif" width="130" height="29" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav5','images/nav2_05.gif')" onmouseout="swap('nav5','images/nav_05.gif')"><img name="nav5" src="images/nav_05.gif" width="130" height="30" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav6','images/nav2_06.gif')" onmouseout="swap('nav6','images/nav_06.gif')"><img name="nav6" src="images/nav_06.gif" width="130" height="28" border="0" alt=""></a></td>
</tr>
</table>
</div>
<div id="aside" class="text">
<img src="images/welcome.gif" width="400" height="42" border="0" alt="Welcome" />
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
</div><div id="footer">
<img src="images/footer.jpg" width="888" height="60" border="0" alt="" />
</div>
</div>
</body>
</html>
CSS : Code: #container
{
margin: 0 auto;
width: 940px;
background: #fff;
}
#header
{
background: #ccc;
padding: 0px;
margin: 0 0 0 0px;
display: inline;
}
#header h1 { margin: 0px; }
#mid
{
margin: 0;
padding: 0;
background: #ffffff;
display: inline;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #383; }
#content-container
{
float: left;
width: 940px;
height:auto;
background: #fff;
}
#content
{
clear: left;
float: left;
width: 160px;
padding: 0px 0;
margin: 0 0 0 20px;
display: inline;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 750px;
padding: 10px 0;
margin: 0 10px 0 0;
display: inline;
}
#aside h3 { margin: 0; }
#footer
{
clear: left;
background: #fff;
text-align: right;
padding: 0px;
}
Hi, I am trying to create a two sided site with nav and constant info on the right and a dynamic area on the left. I have laid out the right side as I need it but can't get both sides to start at the same point on the page. I think this has to do with the way I need it setup to show the background images I have for each div. The right side always starts after the left has finished depending on how much content is in the left area. I have an example link attached with some of the basic code and the .css file Example Page http://parkesproperties.com/dublin_blues/divtest.html .css file http://parkesproperties.com/dublin_blues/base_mz2.css All images http://parkesproperties.com/dublin_blues/images Is there a work around or have I missed something obvious? Any help is appreciated! Cheers Denis I'm trying to create a fairly easy layout, making use of DIVs. The following structure is what I'm trying to accomplish: www.dvolve[PLEASE REMOVE].org/tst.jpg And here's what I currently have: www.dvolve[PLEASE REMOVE].org/tst.htm However, I'm not really convinced that this is the right solution. I am unable to scroll in the content div (IE6) for one, which is quite a problem. I'm hoping to make this look the same for most browsers. Does anyone have a better layout that achieves this or any pointers on what I'm doing wrong? |
|||||||