Easiest way to change layout at this point?? [Archive]

Cza102282

08-20-2008, 09:09 PM

I have an easier question for you pros here. I would like to extend a div over a column. I based my site on a css layout I found here (CSS Liquid Layout #3.1- (Fixed-Fluid-Fixed) ). I need my Search Bar to go over the left colum. If you view everything in a browser the search bar will be a red color. Here is my html.....

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CAI</title>
<link rel="stylesheet" href="StyleSheet.css" type="text/css" />
</head>
<body>
<div id="maincontainer">

<div id="topsection">
<div id="headleft">LEFT
</div>
<div id="headright">SIGN IN/REGISTER
</div>
</div>

<div id="menutop">
</div>

<div id="searchBar">
SEARCH BAR
</div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<div id="topPics">
TOP ROW
</div>

Content Column: Fixed
</div>
<div id="footer">
FOOTER STUFF
</div>
</div>
</div>

<div id="leftcolumn">
LEFT COLUMN - NEED SEARCH BAR TO EXTEND ABOVE THIS
</div>
<div id="rightcolumn">
RIGHT COLUMN
</div>
</div>
</body>
</html>

And here is my CSS............................................................

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 1000px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn
{
margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -1000px; /*Set margin to that of -(MainContainerWidth)*/
/*background: #2f334f;*/
}

#rightcolumn
{
float: left;
width: 190px; /*Width of right column*/
margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
/*background: #2f334f;*/
}

#footer{
clear: left;
width: 100%;
text-align: center;
padding: 4px 0;
}

#footer a
{
font-size: 8pt;
color: #9799a7;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

#headleft
{
float: left;
border: solid 1px black;
width: 15%;
}

#headright
{
text-align: right;
vertical-align:top;
float: right;
color: White;
background: blue;
font-family: Arial;
border: solid 1px black;
width: 83%
}

.goldfiller
{
height: 15px;
background-color: #fdd065;
}

#searchBar
{
background-color: #954b36;
float: right;
border: solid 1px black;
width: 800px;
margin-top: 5px;
margin-bottom: 5px;
}

#topPics
{
border: solid 1px black;
height: 200px;
}

.blueBox
{
margin-bottom: 10px;
background-color: #2f334f;
}

.blueBox img
{
margin-bottom: 15px;
margin-left: 40px;
}

I would like to know the easiest way to modify this.

rangana

08-21-2008, 12:30 AM

First of all, never miss a DTD (http://alistapart.com/articles/doctype). Add this above your <html> tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

And remove highlighted:

<html xmlns="http://www.w3.org/1999/xhtml">

Serve your page as HTML and not XHTML, or you could do otherwise but I recommend plain HTML.

For your problem, I might miss it, but have you tried changing highlighted to 100%:

#searchBar
{
background-color: #954b36;
float: right;
border: solid 1px black;
width: 900px;
margin-top: 5px;
margin-bottom: 5px;
}

Cza102282

08-21-2008, 01:47 AM

I apologize but I asked the wrong question. :(

The Search bar should stay in the same place. I need the left column to move upwards so it is next to the search bar. So I am guessing the left column and search bar would each have a respective column next to each other. The remaining would be nested inside the search column.

Hope that clears it up a bit....