PDA

Click to See Complete Forum and Search --> : some questions on CCS layout



adrianmak
03-23-2007, 07:11 PM
Currently my site I developed is a tabless layout, where CSS is used to divide the layout
<Div> layout is shown below
http://i108.photobucket.com/albums/n16/adrianmak/layout.jpg

In the past, when updating content on the right or the left, I have to adjust line space (ie putting <br>) either the left_col or right_col.
For example, I added a few lines on the right
http://i108.photobucket.com/albums/n16/adrianmak/Snap1-25.jpg

or, I delete few blank lines on the left
http://i108.photobucket.com/albums/n16/adrianmak/Snap2-13.jpg

Neither left or right column will adjust it height automatically such that to touch the top of the footer, I have to put <br> for adjustment
http://i108.photobucket.com/albums/n16/adrianmak/Snap3-6.jpg

How do I overcome this problem ?



body {

text-align:left;
text-align: justify;
background-color:#4E7839;
font-family:"Arial", "Helvetica", "sans-serif";
font-size:16px;
}

div {
margin:0;
padding:0;
//outline:1px solid red;
}

#container {
width:1024px;
padding:0px;
background-color:#FFF;
margin:5px auto;
}

#header {
height:174px;
padding:0px;
}

#logo {
height:140px;
background:url(img/top.jpg) no-repeat;
}

#logo2 {
margin:0 20px 0 0;
padding:0;
text-align:right;
}
.spacer {
clear:left;
}
#menu_bar {

float:left;
// width:778px;
height:34px;
padding:0px;
margin:0px;
text-align:left;
}

li img {
border:0;
margin:0;
padding:0;
}

}

#empty {
margin:0;
padding:0;
}

#empty img{
float:left;
margin:0;
padding:0;
text-align:left;
}

#lang_bar {
float:left;
text-align:left;
}

#menu_bar ul {
list-style-type:none;
margin:0px;
padding:0px;
}
#menu_bar li {
display:inline;
margin:0px;
padding:0px;
border:0px;
}
#menu_bar li a:link, #menu_bar li a:visited {
text-decoration:none;
font-weight:bold;
}

#lang_bar ul {
list-style-type:none;
margin:0px;
padding:0px;
}

#lang_bar li {
display:inline;
margin:0px;
padding:0px;
}

#right_col {
float:right;
width:711px;
//height:550px;
text-align:left;
}
#horiz {
margin:0;
padding:0;
height:40px;
background:url(img/green35.jpg) repeat-x;
}

#content {
padding:10px 50px 10px 50px;
background:url(img/bg01.jpg) repeat-y;
}

#content h2{
text-align:center;
}

#slogon {
margin:0;
padding:0;
text-align:center;

}

#left_col {
float:right;
width:291px;


text-align:left;
}

#left_img {

width:291px;
height:194px;
background:url(img/left_col.jpg) no-repeat;
text-align:left;
}

#left_bottom_img {
width:291px;
height:194px;
background:url(img/left_bottom.jpg) no-repeat;
text-align:left;
}

#address {
font-size:0.8em;
width:291px;
margin:10px 0px 0px 0px;
padding:0px 5px 0px 0px;
text-align:left;

}

#footer {
clear:both;

height:56px;
background:url(img/footer.jpg) no-repeat;
text-align:right;
}

#counter {
margin:0;

padding:0px;
text-align:left;


}

.style1 {
text-align:justify;
}


.style5 {
font-weight:bold;
font-size:medium;
}

.style6 {
font-weight:bold;

}

.tablehead {
font-weight:bold;
}

.text {
font-size:0.8em;
text-align:left;
}
.underconstruct {

padding:30px;
text-align:center;
border:1px solid black;
}


span .style2 {
font-size:200%;
text-align:center;
}

adrianmak
03-23-2007, 07:39 PM
The hardest to fix is there is a image put at the bottom left of the page
so whatever I revised the content on the right or left, the bottom left image will not drop to the bottom.

May be my css layout has problem and come out this issue.