CSS - Content-resizing Main Div

So far my site appears somewhat like this

Header

Menu


Main Content


Footer


Now what I wish to do for the Main Content, is create boxes, 2 top boxes and 2 lower boxes:

Box 1 Box 2
Box 3 Box 4


So I've been playing around, trying to get them to float, ya de da, I can manage to get 2 columns, but when I attempt to put in the 2 lower columns, the footer ghosts over top of all the main content and all you can see is the header, menu and footer.

If attempted to wrap them in container's but have failed miserably, any help would be appreciated.

This is my first completely css site and I am having troubles with my main content areas and some other small minor things.

My design requires that the sidebar be the same height as my content area. What do I need to do to get them the same heights. The main content area changes on each page so my sidebar needs to do the same.

Here is the website. I guess I cannot post url's so I hope I made sense.

Also an example of what the site is going to look is here. Once again cannot post urls.

Also, I need help with lists. In the example image I have the lists side-by-side. Normally I would use a table for this. Is there a way to do this with css?

Any help would greatly be appreciated.

Thanks,

Shaun

Hello - I'm having trouble with the layout of a site I'm working on. Here's the site in question:

http://www.americanidiotsband.com/

If you look at it in anything up to 1024x768, it's fine. But if you go higher than that (say, 1280x1024 resolution), then the main (black) part of the page goes only as far down as the content that is filling it. What SHOULD happen is that the black background should span all the way to the bottom, no matter how much content is inside it...

Here is a link to the stylesheet that I made up:

http://www.americanidiotsband.com/styles.css

I'm sure I'm doing something wrong, and I'm hoping that someone could help me correct this. Thanks in advance for any help that can be offered!...

Here's the url

Template

Any comments on the code will be very helpfull. Even if it is out of topic.

In IE it looks pretty good. In firefox the border goes under the large image and the image navigation is left there naked on the body background.

Hi there!

I am tweaking a WordPress template to fit a blog for a roleplaying game. The template is a three-column, fixed-width one. It looks fine on my tiny 17" monitor at work, but at home on my 22", the blog is very small and sits in the center of the page. (The content section is just 904px wide.)

Is there a way to tweak the style.css file in order to give the columns percentage widths instead of absolute pixel widths, so that the center "content" area will resize properly according to the reader's resolution/monitor size/window size?

I have some experience with CSS and I'm usually pretty good at tweaking pre-existing CSS to fit my needs, but this is something that's a bit beyond me.


I can't put a direct URL in my post, but here's a snippet of the CSS file:


Code:

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
	margin: 0;
	padding: 0;
}

body{
	font-family: Arial, Helvetica, Georgia, Sans-Serif;
	font-size: 12px;
	text-align: center;
	vertical-align: top;
	background: #fff url();
	color: #fff;
}

h1, h2, h3, h4, h5, h6{
	font-family: Arial, Helvetica, Georgia, Sans-Serif;
	font-size: 16px;
}

a{
	text-decoration: underline;
	color: #08441e;
}

a:hover{ text-decoration: none; }

a img{ border: 0; }

abbr, acronym{ border: 0; }

address, dl, p{ padding: 10px 0 0; }

blockquote{
	margin: 10px 10px 0;
	background: #fffada url(images/bg_blockquote.gif) no-repeat 5px 7px;
	color: #736926;
}

blockquote p{
	padding: 10px 10px 10px 20px;
}

blockquote blockquote{
	margin: 10px 20px;
	background: #fff;
	color: #333;
}

blockquote blockquote p{ padding: 10px; }

code{
	background: #f9f9f9;
}

dt{
	font-weight: bold;
}

dd{
	padding: 0 0 5px 15px;
}

hr{
	clear: both;
	margin: 15px 0 5px;
	width: 100%;
	border: 0;
	height: 1px;
	text-align: left;
	background: url(images/bg_comment_bottom.gif) no-repeat;
}

small{
	font-size: 10px;
}

input, textarea{
	font-family: Arial, Helvetica, Georgia, sans-serif;
	font-size: 12px;
	padding: 2px;
}

input#author, input#email, input#url, textarea#comment{
	border: 1px solid #cbb945;
	background-color: #fffadb;
	padding: 3px;
}

input#author, input#email, input#url{
	margin: 0 5px 0 0;
}

#container, #header, #menu, #menu ul li, #menu ul li a, #pagetitle, h1, #syndication, .pagewrapper, .page, .wrapper, .narrowcolumnwrapper, .narrowcolumn, .content, .post, .entry, .browse, sidebar{
	text-align: left;
	vertical-align: top;
}

#container{
	margin: 0 auto;
	width: 904px;
	padding: 10px 0 0;
}

#header{
	margin: 0 0 10px;
	float: left;
	width: 904px;
	height: 250px;
	background: url(images/bg_header.gif) no-repeat left bottom;
	color: #333;
}

#menu ul{
	margin: 0;
	padding: 0 0 0 175px;
	list-style: none;
}

#menu ul li{
	float: left;
	margin: 0 5px 0 0;
	font-size: 14px;
	font-weight: bold;
	background: url(images/bg_tab_right.gif) no-repeat right top;
	color: #ffffff;
}

#menu ul li a{
	display: block;
	padding: 14px 20px 10px;
	text-decoration: none;
	background: url(images/bg_tab_left.gif) no-repeat left top;
	color: #ffffff;
}

#menu ul li a:hover{
	text-decoration: underline;
}

#pagetitle{
	clear: both;
	width: 904px;
	height: 250px;
}


}

#pagetitle h1 a{
	text-decoration: none;
	color: #fff;
}


.pagewrapper{
	margin: 0 0 10px;
	float: left;
	width: 904px;
	background: #fff url(images/bg_page_bottom.gif) no-repeat left bottom;
	color: #333;
}

.page{
	float: left;
	padding: 0 5px 5px;
	background: url(images/bg_page_top.gif) no-repeat;
}

.wrapper{ /* This wrapper class appears only on Page and Single Post pages. */
	float: left;
	width: 500px;
}

.narrowcolumnwrapper{
	margin: 5px 0 0;
	float: left;
	width: 500px;
	background: #fff url(images/bg_narrowcol.gif) repeat-y;
}

.narrowcolumn{
	float: left;
	width: 500px;
	background: url(images/bg_narrowcol_bottom.gif) no-repeat left bottom;
}

.content{
	float: left;
	width: 500px;
	background: url(images/bg_narrowcol_top.gif) no-repeat left top;
}

Thank you!

Hi,

I have a site with a left navigation bar (which is fixed width, and has a background colour that must stretch full screen from top to bottom of the page).

The site is:
http://67.18.220.222/~duoboots/2005/z.html

Stylesheet:
http://67.18.220.222/~duoboots/2005...s/style2005.css

As you can see, the left navigation menu stops once the content within the div is displayed. It does not stretch to the bottom of the screen. (say if you're on 1024 x 768 resolution)

Note: this varies according to the main (right) content. If the main content was shorter than the menu bar - it would work fine. The menu bar has a min-height of 100% which means the background applies to the size of your screen.

However, if the main content height is greater than that of the menu bar - then the menu bar will not adapt, but the background simply stops.

Is there a workaround for this? With tables, this could easily be achieved because the background colour of one cell is stretch until the end of the table, and not the content within the cell. However, I'd like to do this with CSS.

Here's some CSS:

Code:

body, p {

	color:#666666 ; 
	font-family: Verdana, Arial ; 
	font-size:7.5pt ; 
	font-weight:normal; 
}
body {
	height:100%;
	margin: 0px;
	background-color: #2F201E;
}

#container {  
 	width: 968px;
	height:100%;
}


#nav {
	width: 201px;
	border-right: 3px solid #FFFFFF;
	background: #8D603B;
	float: left;
	min-height:100%;
}

I've tried switching "min-height" and "height" but they don't seem to do what I want.... if anyone could help me out it would be MUCH appreciated!

Thanks a lot!

Hello,

I just joined the forum, I'm new to web design although I have some experience in video post production.

I'm attempting to create a layout for a website using sticky footer technique and an image for the border shadow in the main column.
The sticky footer works well until I tweak the css to add the background border image, then I get this empty space in the middle of the body where the border image background should be extending to.

It's probably a novice mistake but I can't get to find it. Your help would be much appreciated.
The HTML:

Code:

<body>

<div id="nonFooter">
		<div id="wrapShadow">
		<div id="header">
				<div id="linksHead"></div>
		<div id="mainMenu"></div>
		</div>		
			
		
		<div id="content">
<div id="bannerSlider">  (SWF file)
</div>
			<div id="contentBuscador">
			</div>
			<div id="contentTours">
			</div>
			<div id="contentElite">
			</div>
			<div id="contentTestimonios">
			</div>
			<div id="contentPromos">
			</div>
		</div>
	</div>
</div>
	<div id="footer">
		<div id="wrapShadowFooter">
		</div>
		</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
	</script>
</body>

The CSS:
Code:

html,body {
	padding: 0;
	margin: 0;
}

html
{
height: 100%;
}

body
{
height: 100%;
background-color: #3399cc;
}

#nonFooter
{
	position: relative;
	min-height: 100%;
	background-image: url(_images/shadow920x1ver3.gif);
	width: 920px;
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

* html #nonFooter
{
	height: 100%;
}

#content
{
	padding-bottom: 7em;
	width: 900px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	clear: both;
	border-top-width: medium;
	border-top-style: solid;
	border-top-color: #336;
}
#header {
	width: 900px;
	height: 100px;
	position: relative;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
}
#footer
{
	position: relative;
	margin-top: -6em;
	height: auto;
	background-image: url(_images/shadow920x1ver3.gif);
	width: 920px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
} 
#wrapShadow {
	width: 920px;
	margin: 0px;
	padding: 0px;
	height: auto;
}
#wrapShadowFooter {
	width: 900px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding: 0px;
	background-image: url(_images/footerCruiseship.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 100px;
}

All #content(area) Divs in content have the same code as this:
#contentBuscador {
	float: left;
	height: 100px;
	width: 880px;
	padding: 0px;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 10px;
}

Thank you,
pixelMason.

Edit: Problem Solved thanks to f_nietzsche

Hi, I've been trying for a while to get to grips with this css lark, but i find some of it really confusing, not being able to make sites that look the same in all browsers without using tables.

So here I arrive at my latest problem. I have made a static site, where resizing the browser doesn't adjust the size of the content. In my logic this ought to mean that scroll bars should appear when the content is bigger than the window, but oh no, everything is just hidden! Am I missing a vital trick here?

The code:

Code:

<div class="title">
	<img src="face.jpg" alt="Picture" width="75" height="75" />
	<img src="title.jpg" alt="Title" width="300" height="88" />
</div>

CSS:

Code:

.title {
	position: fixed;
	left: 10px;
	top: 15px;
	width: 375px;
	height: auto;
}

Just to clarify: When, with the code above, the browser is resized to be small than the width of the div, I expect scroll bars to appear to be able to see the content, but currently it is just hidden.

Can anyone help me?
Thanks in advance

I am trying to add a border to my pictures. I read a tutorial about it but however in firefox it escapes from the box. In IE it looks fine. Has anyone had this problem before? Any tips on fixing it?

Thank you

here is the link

http://www.conceptofgravity.com/test/pictures_test.html

Hello,

My site contains a basic slideshow that is encapsulated in a "main" div tag.

For some reason I cannot center it on the page! I can move it back and fourth but I cannot center it.

Can someone please help.

www(dot)katieandconrad(dot)com

Regards,

CB

I am using this:

http://bonrouge.com/3c-hf-fluid.php

At that code stands the #main div starts off at minimum height and expands with content. The #clearfooter div stops it covering the footer when it expands.

However. I need the #main div to start off filling the gap between the header and footer rather than it being an expanding element. The reason is that I need a background to cover the area between #header and #footer.

I have run out of ideas on how to accomplish this. The CSS I have created so far is:

PHP Code:
 html {
    height: 100%;
}

body {
    margin: 0; 
    padding: 0; 
    height: 100%;
    background-image: url(../images/2500px_height_bg.gif);
    font-family: Verdana, Arial, 'Times New Roman', Serif;
    text-align: center;
}

#wrap {
    min-height: 100%;
}

* html #wrap {
    height:100%;
} 

#contain_header {
    height: 20px;
    text-align: center;
    padding: 0;
}

#header {
    margin:0 auto;
    width: 760px;
    height: 20px;
    background-image: url(../images/header_bg.gif);
    line-height: 20px;
    vertical-align: center;
}

#clearfooter {
    clear: both;
    height: 21px;
    overflow: hidden;
    background-color: red;
}

#contain_footer {
    height: 21px;
    background-image: url(../images/contain_footer_bg.gif);
    background-repeat: repeat-x;
    margin-top: -21px;
    text-align: center;
    padding: 0;
} 

#footer {
    margin:0 auto;
    width: 760px;
    height: 21px;
    background-image: url(../images/footer_bg.gif);
    line-height: 21px;
    vertical-align: center;
    z-index: 1000;
}

#wrap_content {
    position: absolute;
    width: 100%;
    min-height: 100%;
    margin-top: -21px;
    padding-bottom: 31px;
    padding-top: 20px;
    background-color: transparent;

}

* html #wrap_content {
    height: 100%;
}

#main {
    position: relative;
    top: 0px;
    left: 0px;
    height: 100%;
    background-color: white;
} 

* html #main {
    height: 1px;
} 





Any suggestions welcome

Hi,

I guess I can't post the URL of my test page with the problem which would make it a lot easier to explain. I don't quite see why anyone would want to re-create the page from pasted code when they could just look at the actual page but oh well.

Anyway, I'm working on a website that is supposed to look like a folder -- it is composed of a top graphic, content area, bottom graphic, all wrapped in an outer div.

It looks like it ought to in Firefox. In IE there is a gap between the top graphic and the main content div. I've tried making sure all relevant margins, padding etc are set to 0. I can't put the top graphic inside the content div (fixed a similar problem this way on another project) as it is wider!

Here is the page code:

Code:

<%@ LANGUAGE=JScript %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<link rel=stylesheet type="text/css" HREF="kahn.css">
<title>Crollard Kahn</title>
</head>

<body>

<div class="Outer">

<img src="images/top2h.png" style="border: none; margin: 0; padding: 0;">

<div class="Main">

<div class="InnerMain">

<div style="text-align: left; padding: 10px; margin: 0 0 10px 0; background-color: #5C0D10; color: ffffc2; font-size: medium;">
	<!--<img src="home_selected.png" border="0"><img src="home1.png" border="0"><img src="home1.png" border="0"><img src="home1.png" border="0"><img src="home1.png" border="0">-->
	Top navigation bar here...
</div>

<div class="Left">
	<div class="InnerLeft">
		Left navbar<br>here<br>...<br>...<br>...<br>...
	</div>
</div>

<div class="Right">
	<div class="InnerRight">
		<h1 class="Header1 Top">Header</h1>
		<p>Text.</p>
		<p>More Text.</p>
		<p>More Text.</p>
		<p>More Text.</p>
	</div>
</div>

<div style="clear: both; margin: 0; padding: 0;"></div>

</div> <!-- InnerMain -->

</div> <!-- Main -->

<img src="images/footer2.png" style="border: none; margin: 0; padding: 0;">

</div>	<!-- Outer -->

</body>

</html>

Here is the stylesheet:
Code:

BODY { background: #868B6B; margin: 0; padding: 0; text-align: center; font-family: MS Sans Serif; color: black;} 

DIV.Outer { width: 980px; background-color: #868B6B;  margin-left:auto; margin-right:auto; margin-top: 0;}
DIV.Main { width: 950px; background-color: #ffffc2; padding: 0 0 10px 0;  margin-left:auto; margin-right:auto; margin-top: 0;}
DIV.InnerMain { width: 918px; background-color: #ffffd9; padding: 0 0 10px 0;  margin-left:auto; margin-right:auto;}

DIV.Left {float: left; width: 220px; text-align: center; padding: 0 0 0 0; }
DIV.InnerLeft {width: 212px; margin-left: auto; margin-right: auto; padding: 0 0 0 0;}

DIV.Right {float: right; width: 696px; padding: 0 0 0 0; text-align: center; border-left: 1px solid #5C0D10;}
DIV.InnerRight {width: 668px; margin-left: auto; margin-right: auto; padding: 0 0 0 0; text-align: left;}

.Header1 { font-weight: bold; font-size: x-large; font-family: Times New Roman; color: #5B0D0F; font-variant: small-caps; }
.Header2 { font-weight: bold; font-size: large; font-family: Times New Roman; color: #5B0D0F; font-variant: small-caps; }
.Question { font-weight: normal; font-style: italic; color: black; font-variant: small-caps;}
.Answer { color: black; }
.CK { font-variant: small-caps; }
.Topic { font-weight: bold; color: black; }
.TopicLink { font-weight: bold; color: black; text-decoration: underline; }

P.List { margin-bottom: 2em; }
.Top { margin: 0; } 	/* weird firefox blank space otherwise */

I'm fairly new to CSS, but am trying to leave tables behind as much as possible.

Can anybody please tell me how to fix this?

Regards,

Elisabeth

Hi All,

I think the following is a css problem that I have tried to solve but without success and cause a markup validation error that I can't get rid of.

Here you can see the original problem simonedegan.net/index_III.html
which I tried to correct (see he simonedegan.net) but when I go to validate the code I have the following errors:

Line 92, Column 24: ID "flashcontent" already defined.
<div class="style4" id="flashcontent">This SlideShowPro photo gallery requires t

Line 88, Column 24: ID "flashcontent" first defined here.
<div class="style3" id="flashcontent">

Originally I changed the padding from 15px to 200px to allow a proper alignment of the words in the parent pages (e.g. simonedegan.net/news.html).

If it is the case how can I create a 'rule' with the padding of 15px on the left only for the main page where the flash instance is (i.e. simonedegan.net) without affecting the parent pages?

Many thanks for helping

P.S.: my apologies to the moderator for the links. I did not know how to post the questions without URLs so I removed the initial http://. Again my apologies.

Thanks for taking the time to read my question.

I have a MainBox that I have all my page in. <div id="MainBox"></div> I had a height set and both IE and FF displayed ok, but if the content was higher than the box, FF expanded and IE didn't. So I took the height off and IE expaned and FF shrunk to nothing.

What's up with that?

I've attached the code and the one pic. What can I do to get them to display the same?

right now all files go in the same folder.

Thanks,

Brad