CSS - Simple Colums, But Difficult.

Hello everyone,

I have a web application wich i would really like to convert to css style. I have been struggling with this for almost 2 days now and i am getting nowhere... I did manage to make a few 'usable' css based on various template/book but they are either corrupted in mozilla or ie... and thus not usable in a production environment.

Basicly here what i need:

1. header div located at the top of the page
2. menu div located just bellow the header div (25height)
3. left div located bellow the header/menu div (160width)
4. content div located at the right of the left div (max available width)
5. footer div located at the bottom of the page. (height 25)
6. A vertical scrollbar allowing the user to scroll the page. if possible, this scrollbar should be located between the header and footer only (that mean it will allow the user the scroll the left/content while the header/footer stay in the window), kinda like a traditional frame'd layout.


My site is dynamic and the content located at the left (the left div) can be completly disabled by the user. So if the left div is missing, the content div should automaticly adjust is width. I dont want any vertical scrollbar on that site, it should auto-adjust itself.

I hope i have been clear. In case i have not, here is a screenshoot of a layout that is similar to the one i would like to have.

Example of what i want !

What i need is an experienced web dev who can do this for me. Since i know nothing in life if free i will reward this person with ANY book he want, with a maximum of 5.

Here a few examples of what i can provide:

Cascading Style Sheets: The Definitive Guide 2nd edition
http://www.oreilly.com/catalog/css2/

HTML & XHTML: The Definitive Guide, 5th Edition
http://www.oreilly.com/catalog/html5/

JavaScript & DHTML Cookbook
http://www.oreilly.com/catalog/jvdhtmlckbk/

CSS Cookbook
http://www.oreilly.com/catalog/cssckbk/index.html

I have over 17,000 (250+ oreilly, 400+ mspress, etc...) on various subject, so if you have a specific title in mind, you can almost bet that i have it

Anyone ready to take the 'job' can add me to is msn, my address if paologoarex@hotmail.com. I think this would take something like 1hour for an experienced web dev while for me it woud take days (if not weeks) !

Dont blame me for being lazy, i did gave it a try ! but since i am more a coder than a web dev, its very hard for me to grasb all the little tweak of css

contact me if you are interested.

I'm not so CSS savvy, can anyone help me with the specific changes needed here that will force the 3 columns to load height at 100% or full column height?

Also is it possible to have multiple content boxes loading one above the other in the left and right columns instead of one long content box?

jarsandmixes.com/liquid.php





body {
background-color: #FFF7EF;
}

div {
text-align:center;
}

div#wrapper {
background-color: transparent;
border:0px solid black;
margin:0px auto;
text-align:left;
position:relative;
width:100%;
height:100%;
min-height:100%;
}

div#border {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
width:100%;
height:10px;
}

div#page {
background-color: #DEC6B5;
border:1px dashed black;
position:relative;
clear:both;
float:left;
width:100%;
height:100%;
min-height:100%;
padding-bottom: 10px;
overflow:hidden;
}

div#header {
background-image: url(images/.gif);
background-repeat: no-repeat;
border:1px dashed black;
margin:0px;
padding:0px;
width:100%;
height:80px;
}

div#menu {
clear: both;
background-color: #CA7B93;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
width:100%;
height:30px;
}

div#left1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border:1px solid black;
float:left;
margin:5px;
width:20%;
height:auto;
}

div#left2 {
background-color: #FFF7EF;
background-image: url(images/bkg3.gif);
background-repeat: repeat;
border:1px solid black;
margin:0px 5px 0px 5px;
padding:4px;
right:20px;
width:90%;
height:auto;
}

div#content1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border:1px solid black;
margin:5px auto;
width:54%;
height:auto;
}

div#content2 {
background-color: #DEC6B5;
background-image: url(images/bkg3.gif);
border:1px solid black;
margin:0px 5px 0px 5px;
padding:4px;
width:96%;
height:auto;
}

div#divider {
background-image: url(images/.gif);
background-repeat: no-repeat;
margin:10px auto;
width:439px;
height:60px
}

div#right1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
float:right;
border:1px solid black;
margin:5px;
right:10px;
width:20%;
height:auto;
}

div#right2 {
background-color: #FFF7EF;
background-image: url(images/bkg3.gif);
background-repeat: repeat;
border:1px solid black;
margin:0px 5px 0px 5px;
padding:4px;
right:20px;
width:90%;
height:auto;
}

div#footer {
clear: both;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
width:100%;
height:30px;
}

Hey all,

I have been working on a site in CSS which looks pretty much how we want it to look in FF, however IE is giving me all sorts of problems.

If you look at the following page http://www.mobileshop.com/3phones.com/viewphone.php in firefox you can see that the middle (white) column rests nicely between the two side columns, however, if you change to IE and look at the very same page then the middle column drops below the left side column.

This is my first time at a css design and i cant work out why it is doing it, also the main logo is supposed to be centered, in IE it is left aligned.

If you are viewing the source, you will see a tag soup of tables in the middle of the nice CSS, this is due to the fact that we pick up a feed and it dumps the data into our page. This will change to be pure CSS but i am running out of time to get the site launched first.

One final question, i downloaded the Tidy HTML validator for firefox. I managed to get my pages passed the W3c online checker, but tidy claimed there was still errors. I went through and fixed all them to get a happy green tick but then when going back to W3C validation some things failed. I was under the impression that Tidy was developed by W3C, so why do they give varying results regarding validation?

Thank you for your time.

hello,

ive been following a tute designed for a two column template and trying to follow this logic to make a 3 column template but i cant make it work unfortunately. any help would be really appreciated, thank you!

apologies for a 'here is the code' post, but here is the code

basically i want a 3 column template with 7 rows and only the 3rd row from the top really being divided into 3 columns -standard header, main content, footer, kind of design. whole 'table' is 587 wide and column sizes are 202 for left and right and 183 for center column.

(no live link sorry)

index page:

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=utf-8" />
<title>Untitled Document</title>
<link href="css/template_css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="tag">Tag</div>
<div id="header">Header</div>
<div id="left">Left</div>
<div id="main_content">Main Content</div>
<div id="right">Right</div>
<div id="login">Login</div>
<div id="menu1">Menu1</div>
<div id="menu2">Menu2</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

css file:

Code:

body {
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
margin: 0 auto;
text-align: center;}

#container {
border: 4px #99968F solid;
width:587px;
height: 724px;
margin: 20px auto;}

#tag {
text-align: left;
color: #64F81B;
font-family:Arial, Helvetica, sans-serif; 
font-size:12px;
background-color: #000000;}

#header {
width: 587px;
height: 135px;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;}

#left {
text-align: left;
width: 202px;
height: 287px;
margin: 0 auto;
float: left;
padding-top: 39px;
background-image: url(../images/left_bg.jpg);
background-repeat: no-repeat;}

#main_content {
margin-left: 202px;
padding-top: 25px;
width: 183px;
height: 287px;
background-image: url(../images/main_content_bg.jpg);
margin: 0 auto;}

#right {
float: right;
height: 287px;
margin: 0 auto;
margin-left: 385px;
padding-top: 39px;
width: 202px;
background-image: url(../images/right_bg.jpg);}

#login {
clear: both;
width: 587px;}

#menu1 {
clear: both;
width: 587px;}

#menu2 {
clear: both;
width: 587px;}

#footer {
clear: both;
width: 587px;}

Hello,

I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left.

See here

see how it got below ?

It is XHTML validated and CSS is fine too (some background color warnings).

Plz help me to make central column go up. Thanks.

this is bugging the hell out of me, cant find a working answer anywhere (i've tried a bunch of things)

So I have 3 images for the top of my page and 3 images for the bottom.

The page is enclosed in a div frame titled "frame"

each of the 3 columns is enclosed in a frame "leftframe" "centerframe" and "rightframe"

Each of the 3 columns has a top which is a fixed size image at the top, a middle which is just empty space for content to go, and a bottom which is a fixed size image at the bottom.

Problem: I can't get any of the 3 column's bottoms to stick to the bottom of "frame"

I've tried some code in here to do it and it doesn't work..


any help here?

thanks!

Code:

<style type="text/css">
	
	body {
		text-align:center;
		height:100%;
		min-height:100%;
		padding:0px;
		}
	
	#frame {
		width:800px;
		height:100%;
		min-height:100%;
		margin-right:auto;
		margin-left:auto;
		margin-top:0px;
		padding:0px;
		text-align:left;
		position:relative;
		}
		
	#contentlefttop {
		width:155px;
		height:282px;
		padding:0px;
		float:left;
		background-image: url(images/layout_01.gif);
		background-repeat:no-repeat;
		}
	
	#leftframe {
	float:left;
	width:155px;
	position:relative;
	height:100%;
	min-height:100%;
	}
	
	#contentleft {
	clear:left;
	float:left;
	padding:0px;
	width:155px;
	padding-bottom:270px;
	}
	
	#contentleftbottom{
	width:155px;
	height:270px;
	/*clear:left;
	float:left;*/
	padding:0px;
	position:absolute;
	bottom:0;
	background-image: url(images/layout_07.gif);
	background-repeat:no-repeat;
	}
	
	#contentcenter {
		width:486px;
		padding:0px;
		clear:left;
		float:left;
		text-align:center;
		min-height:100%;
		height:100%;
		padding-bottom:53px;
		}
		
	#rightframe {
	float:left;
	position:relative;
	height:100%;
	min-height:100%;
	width:159px;
	}
	
	#centerframe {
	float:left;
	position:relative;
	height:100%;
	width:486px;
	}
	
	#contentrighttop {
		width:159px;
		height:282px;
		padding:0px;
		clear:left;
		float:left;
		background-image:url(images/layout_03.gif);
		background-repeat:no-repeat;
		background-position:top;
		}
		
	#contentright {
	clear:left;
	float:left;
	width:159px;
	padding:0px;
	height:100%;
	padding-bottom:270px;
	}
	
	#contentrightbottom{
	width:159px;
	height:270px;
	/*clear:left;
	float:left;*/
	position:absolute;
	bottom:0;
	padding:0px;
	background-image: url(images/layout_08.gif);
	background-repeat:no-repeat;
	background-position:bottom;
	}
	
	#contentheader {
	width:486px;
	height:135px;
	float:left;
	background-image: url(images/layout_02.gif);
	background-repeat:no-repeat;
		}
		
	#contentfooter {
	/*clear:left;
	float:left;*/
	width:486px;
	height:53px;
	background-image: url(images/layout_09.gif);
	background-repeat:no-repeat;
	position:absolute;
	bottom:0;
	}
	
	#sitemessage {
	margin-left:17px;
	margin-right:31px;
	height:90px;
	text-align:center;
	font-size:12px;
	}
	
	#wisemanquote {
	margin-left:22px;
	margin-right:24px;
	height:85px;
	text-align:center;
	font-size:12px;
	}
		
	p,h1,pre {
		margin:0px 10px 10px 10px;
		}
		
	h1 {
		font-size:14px;
		padding-top:10px;
		}
		
	#contentheader h1 {
		font-size:14px;
		padding:10px;
		margin:0px;
		}
	
	#contentright p { font-size:10px}
	
</style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">

<div id="frame">
  	<div id="leftframe">
        <div id="contentlefttop">
        	<div id="sitemessage"></div>
        </div>
        <div id="contentleft">Left</div>
        <div id="contentleftbottom"></div>
    </div>
    <div id="centerframe">
    	<div id="contentheader"></div>
        <div id="contentcenter">
          <p>Center</p>
        </div>
        <div id="contentfooter"></div>
    </div>
    <div id="rightframe">
        <div id="contentrighttop">
        	<div id="wisemanquote"></div>
        </div>
        <div id="contentright">Right</div>
        <div id="contentrightbottom"></div>
    </div>
</div>

I am new to this, but for some reason I can't figure it out. My right column goes below the left one.

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#leftcolumn
{
  color: #000000;
  font-family: "Verdana";
  font-size: 12px;
  width:520px;
  border-style:solid;
  border-width:5px;
}

#rightcolumn{
  float: right;
  border-style:solid;
  border-width:5px;
  width: 240px;
}

#main_body {
  width: 900px;
  color: #000000;
  font-size: 12px;
  float: right;
  display: inline;
  text-align: left;
}
</style>

</head>

<body>
<div id="main_body">
<div id="leftcolumn">

lots of text and stuff

</div>

<div id="rightcolumn">

more text

</div>
</div>
</body>
</html>

Im really new to this so please forgive the stupid questions. I have a logo div and I want to output a bit of PHP to the right of the logo. I put my code right after the header div and it places the output under the image, not to the right.

Here is my code:
Code:

  <h1 id="logo"><a href="<?php echo $this->getUrl('') ?>"></a></h1>

 <img src="cart.jpg" alt="Cart" />
  
    <?php $_cartQty = $this->getSummaryCount() ?>
    <?php if ($_cartQty>0): ?>
                <?php echo $this->__('There are <a href="%s"><strong>%s items</strong></a> in your cart.', $this->getUrl('checkout/cart'), $_cartQty) ?>
            <?php echo $this->__('Cart Subtotal:') ?> <strong><?php echo Mage::helper('checkout')->formatPrice($this->getSubtotal()) ?></strong>
          <?php if ($_subtotalInclTax = $this->getSubtotalInclTax()): ?>
              <br />(<strong><?php echo Mage::helper('checkout')->formatPrice($_subtotalInclTax) ?></strong> <?php echo Mage::helper('tax')->getIncExcText(true) ?>)
    <?php endif ?>
	          <?php endif; ?>

    <?php if($_cartQty && $this->isPossibleOnepageCheckout()): ?>
    <div class="actions">
        <button class="form-button" type="button" onclick="setLocation('<?php echo $this->getCheckoutUrl() ?>')">
            <span><?php echo $this->__('Checkout') ?></span>
        </button>
    </div>
    <?php endif ?>

    <?php $_items = $this->getRecentItems() ?>
    <?php if(count($_items)): ?>
    <?php echo $this->__('Recently added item(s)') ?>
        <?php foreach($_items as $_item): ?>
        <?php echo $this->getItemHtml($_item) ?>
    <?php endforeach; ?>
    <script type="text/javascript">decorateList('cart-sidebar', 'non-recursive')</script>
    <?php else: ?>
    <?php echo $this->__('You have no items in your shopping cart.') ?>
    <?php endif ?> 

Red is the code im trying to position.

Attached is an image showing at the top what it is currently, and then at the bottom what im trying to achieve.

Is the best way to do this to create a seperate DIV with float right or something along those lines?

I think that this is something really basic but I just haven't been able to put my finger on the problem. Can someone please point me in the right direction?

In IE 6 the cell background (as defined in CSS) or the table cell size is not correct, but it looks fine in FF.

The test page is: http://www.kdays.com/box/kerrin.htm

Hi,

I am trying to center my page wrapper. It centers in FF, but not IE. I just cannot see what is wrong.

This is my CSS:

PHP Code:
 body{
margin: 0 auto;
}

#wrapper{
width: 900px;
margin: 0 auto;
} 





Any ideas?

Thanks in advance!

Fairly straightforward problem:

I'm creating a header and I have a blank div to the left of the header that I have the width set to 10%, because i want to position the content depending on the browser size, but when I make the browser window too small the content to the right of the blank div moves underneath the blank div.

Anyway to set the content as fixed and just have the user scroll if the browser is too small?

Thanks!

Ohh..

and both divs the "blankDiv" and "header" are floated left...

Code:

#blankDiv{ 	width:10%; 	background-image:url("../images/header_tile.png"); 	background-repeat:repeat-x; 	height:224px; 	float:left; }  #header{ 	float:left; }

So say I want to put a DIV over top and image, and say that DIV happens to be about 30px wide and 10px tall. I can easily do it with:

<img src="image.gif" height="100" width="100"><div style="position:relative; top: -10px; left: -30px; z-index:5; display:inline">text</div>

But doing so always creates a bit of space to the right of the image, as if the DIV were there, and not at it's new spot. Basically, it creates an extra space after the image that messes everything up for me. (This isn't caused because the DIV is actually larger than 30px. It's not. And I can move it much further to the left on the image.) How do I get a div over an image without getting that extra space after the image? I suppose I could have a div that contains both the image and the layered div, then position them absolutely inside it? Is this the best solution?

*** EDIT: YOU CAN SEE AN EXAMPLE HE ***

http://www.poweredpages.com/sample.php

Thanks.

*** UPDATE. Got the space to leave after placing it as absolute inside a relative DIV. Now I have vertical alignment discrepancies between IE and Firefox. There has to be an easier way! ***

I'm having this CSS problem with a div not doing it's width to 100% like im telling it to.. Basically I have this problem:

img386.imageshack.us/img386/1795/ddddye5.png

As you can see by the picture, I need the side content box to resize and go 100% to the bottom where my footer is. I CANT have this being a fixed height because that's not what I'm looking for. Anyway, here's my CSS:

Quote:
#maincontentleft {
float : left;
width : 252px;
height: 100%;
background-image : url("images/sidecontentbg.gif");
}
#sidecontentbg {
background-image : url("images/sidecontentbg.gif");
padding-left : 15px;
padding-right : 15px;
height: 100%;
background-color: red;
}
#sidecontenttop {
background-image : url("images/sidecontenttop.gif");
}
#footer {
padding-top: 5px;
padding-bottom: 5px;
background-color : #ebebeb;
height : 35px;
border : 1px solid #dbdbdb;
text-align : center;
}



The entire side bar thing i'm making is in a div which CSS id is "maincontentleft" and then I have the actual side content box inside that with id's "sidecontenttop" and "sidecontentbg " where "sidecontentbg " is the repeating background that is supposed to go all the way to the bottom.

I've never used one line of CSS every before tonight. I'm learning how to use HTML and CSS Properly and the CSS thing is completly new to me.

The book gives an example:

Code:

<HTML>
	<HEAD>
		<TITLE>StarBuxx Coffee</TITLE>
		<style type="text/css">
			body {
				 background-color: #d2b48c;
				 margin-left: 20%;
				 margin-right: 20%;
				 border: 1px dotted gray;
				 padding: 10px 10px 10px 10px;
				 font-family: sans-serif;
			}
		</STYLE>
	</HEAD>
	<BODY>
		<H1>StarBuxx Coffee Beverages</H1>
		<H2>House Blend, $1.49</H2>
		<P>A smooth, mild blend of coffees from Mexico, Bolivia, and Guatemala.</P>
		<H2>Mocha Cafe Latte, $2.35</H2>
		<P>Expresso, steamed milk and chocolate syrup.</P>
		<H2>Cappuccino, $1.89</H2>
		<P>A mixture of espresso, steamed milk and foam</P>
		<H2>Chai Tea, $1.85</H2>
		<P>A spicy drink made with black tea, spices, milk and HHUUHHHHNAY!</P>
	</BODY>
</HTML>

In The picture in the book, it shows a 1px border around the entire Content, but when I open it up in IE I don't see the border around the content. Why is this? Is the book out-dated?

Also, Did anybody know Gray and Grey are both the same thing? g-r-a-y is simply an American derivation of the original spelling g-r-e-y.

Gray is a color.
Grey is a *colour*

I have looked on countless web pages for help with positioning a image using CSS. I have a logo that I want to appear in the middle of the page regardless of what sized browser the person is using so basically ro replace the <center> tag.

I know all about aboslute positioning etc but this means it will not ajust with the size of the browser. Can anyone help me to just position an image in the middle of a page using purely CSS?

Thanks