- This topic is empty.
-
AuthorPosts
-
February 28, 2010 at 2:52 pm #28205RadiantMember
I’ve been looking across the web for hours for a solution, I only have a few hours of experience with XHTML/CSS so the solution might be very simple but I haven’t found it yet.
The problem is the following ( I don’t have a place to host this, sorry. ), I am trying to get my content boxes to stretch throughout the length of the whole page, this is the code I use (you might see an overdose of code in areas because I was trying out multiple solutions, none of them worked. ).
Thanks in advance for helping me.
HTML Document:
Code:
Error 2.
This is where the blog posts go and the main content.This is the navigation
CSS Stylesheet
Code:/*CSS Document
v1.0 | 20080212*/
HTML, BODY, DIV, SPAN, APPLET, OBJECT, IFRAME, H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE, PRE, A, ABBR, ACRONYM, ADDRESS, BIG, CITE, CODE, DEL, DFN, EM, FONT, IMG, INS, KBD, Q, S, SAMP, SMALL, STRIKE, STRONG, SUB, SUP, TT, VAR, B, U, I, CENTER, DL, DT, DD, OL, UL, LI, FIELDSET, FORM, LABEL, LEGEND, TABLE, CAPTION, TBODY, TFOOT, THEAD, TR, TH, TD
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
BODY
{
line-height: 1;
}
OL, UL
{
list-style: none;
}
BLOCKQUOTE, Q
{
quotes: none;
}
BLOCKQUOTE:before, BLOCKQUOTE:after, Q:before, Q:after
{
content: ”;
content: none;
}
/*remember to define focus styles!*/
:focus
{
outline: 0;
}
/*remember to highlight inserts somehow!*/
INS
{
text-decoration: none;
}
DEL
{
text-decoration: line-through;
}
/*tables still need ‘cellspacing=”0″‘ in the markup*/
TABLE
{
border-collapse: collapse;
border-spacing: 0;
}
/*END OF RESETLAYOUT
*/
HTML
{
height: 100%;
}
BODY
{
min-height: 100%;
height: 100%;
background-color: #CCC;
}
#page-wrap
{
width: 960px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px auto -250px;
padding: 150px;
position: relative;
}
/*
BOXES
*/
#main-content
{
width: 600px;
background-color: #333;
float: left;
height: 100%;
height: auto !important;
min-height: 50%;
}
#navigation
{
width: 250px;
margin-top: 100px;
background-color: #09F;
float: left;
height: 100%;
height: auto !important;
min-height: 100%;
}February 28, 2010 at 5:31 pm #71771arjunvasudevaParticipantfor quick simpleness i just use:
min-width: 800px;
max-width: 2000px;and
min-height: 600px;
max-height: 1200px;February 28, 2010 at 6:22 pm #71773RadiantMemberBut what if I want the div to fill the whole area under it, just like this site pretty much has on the right?
February 28, 2010 at 8:39 pm #71783TheDocMember"arjunvasudeva" wrote:for quick simpleness i just use:min-width: 800px;
max-width: 2000px;and
min-height: 600px;
max-height: 1200px;IE has trouble with these commands (specifically, IE6 does not except "min").
February 28, 2010 at 8:53 pm #71784arjunvasudevaParticipantoh yeah :D
But who actually likes IE6?
March 1, 2010 at 4:08 pm #71821RadiantMemberNo I haven’t, but I haven’t really seen any websites that have 100% height working either, they all use faux columns I suppose? And so does this site?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.