CSS Layout question

oihjk · #1 27-May-2003, 00:30

I'm working on doing a site using CSS positioning. I'm using an external Style Sheet, I've got a DIV (DIV1)for basically the main content of the page. Inside I want to put another DIV (DIV2) with a colored background to go along the right side of the parent DIV (DIV1) to where it fills the whole length of DIV1 and a portion, say 15 % of the width. I can get it for the most part, but it won't fill the length of the 1st DIV 100% of the way, it does the same size no matter which percentage I put in (now it does change sizes when I do pixels). I want the rest of DIV1's content to flow on the left side of DIV2.

Here is my page...Below it is the Style Sheet as well.

HTML Code:


<html>
<head>
<title>DHTML Menu Sample</title>
<link rel="stylesheet" title="Default" href="./EricJamesU.css">
</head>
<Body bgcolor="white">

<DIV class="DocBorder">

<DIV id="bgcolor"></DIV>

<Img src=".\mimisen1.jpg">

</DIV>
</Body>
</html>

Style Sheet EricJamesU.css

CSS Code:

DIV.DocBorder	{
			width: 100%;
			margin: 0% 3% 0% 3%;
			Border-right: 1px solid #000000;
			Border-bottom: 1px solid #000000;
			Border-left: 1px solid #000000;
			padding: 10px 10px 10px 10px;
			}


#bgcolor		                {
			display: block;
			position: relative;
			top: -10px;
			left: 10px;
			background-color: #4682B4;
			width: 15%;
			height: 100%;
			float: right;
			}

Anyone know where the problem may be?
Eric

pcxgamer · #2 27-May-2003, 03:03

I played witht he code for well longer than I would like to admit :o. I'm not that good with CSS. I played with the code for sometime and I'm alomst sure I wasn't able to solve the problem. I did change the code somewhat and was able to move the blue bar to the bottom but I think it will mess up the top. Here the code.

CSS Code:

#bgcolor		                {
			display: block;
			position: relative;
			top: 0px;
			left: 10px;
			background-color: #4682B4;
			width: 15%;
			height: 100%;
			float: right;
			}

I changed the top: -10px; to top: 0px; I'm thinking that this isn't going to work right but I thought I would see. It moves the blue bar to the bottom but I'm sure it will then produce the same problem up top. Try it and see. Like I sad I'm not too good with CSS but just in case it work I thought I would get you to try. If it doesn't work I'm sorry I wasn't able to help but if you check back tommorrow someone will have help out. I'll do I little researching tonight and tommorrow and see if I can be of more help.

Later

JdS · #3 27-May-2003, 16:32

Hello oihjk,

Sorry if I included a typo in your nick...

I will take a look at your HTML / CSS code later today and see what I can come up with. What you trying to do should be relatively simple to do but getting it to work in ALL the browsers is the real challenge!

JdS · #4 28-May-2003, 11:36

Here's what I could manage to come up with - copy the html below and view it off a browser.

Both columns should line up to the longest column on either side; it works on Mozilla and even Opera 6.01 but surprise, surprise, not on MSIE!

If I learn anything new, I will update this thread...

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>
<title>GIDForums - 2 column (liquid) layout with CSS</title>
<style type="text/css">
<!--
body {
 font:normal 12px verdana,arial,helvetica,sans-serif;
 background-color:#FFF;
 margin:0%;
 width:auto;
 height:auto;
}

#Main {
 display:table;
 background-color:#F6F6F6;
 width:auto;
 height:auto;
 margin:1%;
 padding:0%;
 border:1px solid #000;
 border-top-style:none;
 clear:both;
}

div.Article {
  display:table-row;
  /* if you are certain that nearly every
   page will contain a longer ArticleCellLeft,
   then use the same background color here
   as ArticleCellRight */
  background-color:#4682B4; /* otherwise, use 'transparent' */
  width:auto;
  height:auto;
  margin:0%;
  padding:0%;
  clear:both;
}

div.ArticleCellLeft {
  display:table-cell;
  background-color:#F6F6F6;
  /* total width = 80%
     see padding below */
  width:72%;
  height:auto;
  margin:0%;
  padding:0% 4% 4% 4%;
  vertical-align:top;
  /* IE doesn't yet recognise 'display:table-cell'? */
  float:left;
}

div.ArticleCellRight {
  display:table-cell;
  background-color:#4682B4;
  color:#FFF;
  /* total width = 20%
     see padding below */
  width:16%;
  height:auto;
  margin:0%;
  padding:0% 2% 4%;
  vertical-align:top;
  /* IE doesn't yet recognise 'display:table-cell'? */
  float:right;
}

#footer {
 text-align:center;
 font:500 11px monospace;
 clear:both;
}
-->
</style>
</head>
<body>  
<div id="Main">
  <div class="Article">
    <div class="ArticleCellLeft"> 
      <p><b>Left Column</b></p>
      <p>This is a test paragraph. This is a test paragraph. This is a test paragraph. 
      This is a test paragraph. This is a test paragraph. This is a test paragraph.</p>
      <p>This is a test paragraph. This is a test paragraph. This is a test paragraph. 
      This is a test paragraph. This is a test paragraph. This is a test paragraph.</p>
      <p>This is a test paragraph. This is a test paragraph. This is a test paragraph. 
      This is a test paragraph. This is a test paragraph. This is a test paragraph.</p>
      <p>This is a test paragraph. This is a test paragraph. This is a test paragraph. 
      This is a test paragraph. This is a test paragraph. This is a test paragraph.</p>
    </div>    
    <div class="ArticleCellRight"> 
      <p><b>Right Column</b></p>
      <p><img src="image.gif" width="25" height="25" alt="Some Image" border="0" /><br />
      Something else.</p>
      <p><img src="image.gif" width="25" height="25" alt="Some Image" border="0" /><br />
      Something else.</p>
    </div>
  </div>
</div>
<div id="footer">Sample CSS Code by 
  <a href="http://www.desilva.biz/forum/">GIDForums&trade;</a>
</div>
</body>
</html>

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
a C input question..	tmike	C Programming Language	2	19-Sep-2003 02:39
a C input question	tmike	C Programming Language	1	16-Sep-2003 02:31
a noobish compiler question	Charunks	CPP / C++ Forum	5	03-Sep-2003 02:18
looking for new layout	Allowee	Web Design Forum	2	14-Jul-2003 06:57

CSS Layout question

Tableless layout: 2 column (liquid) layout with CSS