PDA

View Full Version : div css



hwnd
04-15-2011, 09:50 PM
ok i have this div inside my middle div, im trying to align this div/table/ to the bottom of the middle div, it starts out correct on the left but scrolls all the way over to the right side of the page, i can correct it if i change the width but isnt there another way of doing this?

css code:


#bottomheader {
display: table;
background-color: #060607;
width: 100%;
height: 20px;
position: absolute;
bottom: 0;
}


html code:


<div id="middle">
<div class="column-in">
middle
</div>
<div id="bottomheader"></div>
</div>

sunfighter
04-16-2011, 06:26 PM
Setting the width in #bottomheader will give you a fixed width. Another way is to remove the width and let your content dictate the width. These are the only ways i know of.

hwnd
04-16-2011, 09:40 PM
Nope didnt seem to work unless i adjust the width to a fixed setting. This is my code, the div that is messing up is defined as 'specialtbl'

CSS


* { font-family: verdana, tahoma, helvetica, geneva, sans-serif; font-size: 11px; }

html, body {
margin: 0 0 0 5px;
height: 100%;
}

.column-in {
margin: 0;
padding: 5px;
}

.cleaner {
clear:both;
height:1px;
font-size:1px;
border:none;
margin:0;
padding:0;
background:transparent;
display:none;
}


/* divs */

#container {
width: 600px;
height: 100%;
padding: 0;
display: table;
}

#row {
display: table-row;
}

#left, #right {
width: 150px;
background-color: #dedfdf;
display: table-cell;
}

#middle {
width: 300px;
background-color: #f7f7f7;
display: table-cell;
}

#header {
padding: 5px;
width: 100%;
background-color: #060607;
color: #fff;
display: table;
}


#specialtbl {

width: 100%;
height: 20px;
background-color: #060607;
display: table;
position: absolute;
bottom: 0;

}


/* div links */

.header a, a:link, a:visited, a:hover, a:active { color: #b9c6d7; }


/* IE only */

* html #container {
height: 100%;
}
* html #left {
float:left;
}
* html #right {
float:right;
}
* html #middle {
float: left;
height: 1%;
}


HTML


<body>

<div id="container">
<div id="row">

<div id="left">
<div class="column-in">
left
</div>
</div>

<div id="middle">
<div id="header">&nbsp;&nbsp;&nbsp;&nbsp;<a class="header" href="http://www.quotejerk.com">quotejerk.com</a>&nbsp;> home page</div>
<div class="column-in">
middle
</div>
<div id="specialtbl"></div>
</div>

<div id="right">
<div class="column-in">
right
</div>
</div>

<div class="cleaner">&nbsp;</div>

</div>
</div>

</body>

sunfighter
04-18-2011, 12:01 AM
Nope didnt seem to work unless i adjust the width to a fixed setting. :thumbsup: Yeah! That's what I said. Remove width: 100%; and replace it with width: 300px;

Or do you the div placed some where else? Or centered in the middle div? Where and how wide do you want it???