...

View Full Version : div css



hwnd
04-15-2011, 08: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, 05: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, 08: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-17-2011, 11:01 PM
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???



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum