CSS - Div Positioning Question For Css Layout

Hi all-

I m building a tableless site and am having difficulties getting the one section to fit in properly. It works great in FF but bumps down below the left nav in IE and I'm bashing my head against the wall trying to figure out which property is causing this behaviour.

The majority of my audience uses IE so this is important that it displays properly

See the example he http://verticalextreme.com/redesign.html

CSS is he http://verticalextreme.com/_site_stylesheets/veStyle_green.css

thanks in advance for any pointers!

hey all,

i am new to using CSS. (Yes i am very much behind the times). But i am trying to rectify that!

Now the problem i am having is that i have a flash object that i simply want to align centered horizontally and it stays centered no matter what. but i would also like to position it y = 100 (x and y positioning)

any ideas!

http://www.mihomeanddesign.com/test/

I was hoping someone would have a suggestion as to how to lay this site out without using absolute positioning for the #mainimage div. I know that I could float it right within the main wrapper, but I also want the top nav and the footer to extend 100%. I want to do this to avoid having to put "style="padding-bottom: 423px; " in every <p> at the bottom of the page if there is not a lot of text on it... like on the home page and the contact page. Any suggestions would be greatly appreciated.

I'm using absolutely positioned divs as a dropdown subnavigation. While I have yet program the javascript functionality that will make these divs appear and disappear, I am currently working on placing the divs just right on the page. (The simple part, right?? Right...)

Check out this page: http://www.psd7.com/fst/www_live/

It shows one of my subnavigation divs (the rest are hidden). On most browsers, when you roll over the Our Tradition button on the left, the horizontal line lines up perfectly with the top of the subnavigation. However, on the most commonly used browser on the planet (IE for Windows), these things are not lined up, but are slightly offset.

I can't imagine how to work this out. If I change the top value for the subnav so it lines up in IE for Windows, then it won't line up in any of the other browsers.

Here's the css code:

Code:

#subnav_our_tradition {
	position: absolute;
	left: 155px;
	top: 230px;
	width: 137px;
	background-color: #7C272D;
	z-index: 3;
}

Here's the HTML code regarding that one subnav:

Code:

<div id="subnav_our_tradition">
	<div class="subnav_item"><a href="our_tradition/intellectual_tradition.htm">The Franciscan Intellectual Tradition</a></div>
	<div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div>
	<div class="subnav_item"><a href="our_tradition/mission.htm">Mission Statement</a></div>
	<div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div>
	<div class="subnav_item"><a href="our_tradition/community_life.htm">Community Life</a></div>
	<div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div>
	<div class="subnav_item"><a href="our_tradition/resources.htm">Resources</a></div>
	<div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div>
	<div class="subnav_item"><a href="our_tradition/links.htm">Links</a></div>
</div>

Can anyone suggest a workaround?

this should be simple, but i just don't seem to have the hang of css yet

what i want right now is a div for the links and stuff at the top, a bar on the left with the content to the right, and then the footer for more links and stuff, basically something like this site http://www.c21homeservices.com/common/mkttrends.php?mtt=selling only using css

the man problem right now is that i can't get the content box positioned so that it has a 5px border around it or something so you see its parent box as a border and as more content is put into it the page justs gets longer at the content box with its parent moving with it

maybe just looking at what i have will help more

the HTML

Code:

......
<body>
<div id="all">
<div id="head">
Head Section
</div>
<div id="main">
Bar


<div id="content">Content Goes Here</div>

</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>

and the css

Code:

body    {
        background-color:#ff0000;
        }

#head   {
        height:200px;
        }
        
#all   {
        margin-left:3%;
        margin-right:3%;
        background-color:#a0a0a0;
        
        }

#main   {
        background-color:#ff00ff;
        
        }

#side_bar{
        background-color:#99ff99;
        }

#content{
        position:relative;
        float:right;
        width:80%;
        right:10px;
        background-color:#ffffff;
        padding:5px;
        }

#footer {
        height:200px;
        }

those funky colors are so i can see the divs

I'm trying to create a 3 column layout where all the columns are contained within 1 larger <div>.

So far I've managed to create 3 columns using absolute positioning that dont allow the back-ground image of the containing <div> to show through.

If I use relative positioning, the background-image shows, but the columns are set relative to one another and they stagger from left to right in a diagonal fashion. I can correct it using negative values for the "top" attribute, but it seems bushleague and its incredibly tedious.

Is there anyway I can have 3 PROPER (not using the above method) columns while also having the largest containing div's back-ground image show through them?

The following gives me the staggered layout:
Code:

.leftColumn{
		margin-left:20px;
		width:100px;
		border:thin dotted #999999;
	}
	.middleColumn{
		margin-left:121px;
		width: 450px;
		border:thin dotted #999999;
	}
	.rightColumn{
		margin-left:572px;
		width: 200px;
		border:thin dotted #999999;
	}
	.main{
		left:200px;
		width: 950px;
		background-image: url(Images/PaperBkg.gif);
		background-repeat:repeat-y;
	}

        <div class="main">
		<div class="leftColumn">
		
		</div>

		<div class="middleColumn">					
		
		</div>
		
		<div class="rightColumn">
		
		</div>
         </div>

Thanks guys.

hi,

I have a div that holds everything in called #bgcontain. This is just viewable in 800x600. An would center if the browser res is higher.

I would like to place an advert on the right of this div that 'appears' if some has a higher res. So this advert would be off center. I have tried to put the advert div inside #bgcontain and relatively position it but I cant seem to get there, can any help point me in the right direction

thanks

I have designed a site that has a centered container div with a set width of 880px. I used the "margin:0px auto;" formatting to center the container div.

Inside the container, I would like to position a div block absolutely or relatively in the page. This is so I can position it over other divs within the container and have control of the look of the page.

For centered absolute positioning, I have seen to use a css formatting of:

"
postition:absolute;
width:600px;
top:10px;
left:50%;
margin:0 0 0 -300px;
padding:5px;

"

The problem here is that on smaller resolutions, the absolute div is pushed to the left and if the browser window is thinner than 600px wide, the div starts to disappear to the left of the page.

Any help would be appreciated to help me figure out a better way to position this internal div without hiding it or moving the other content on the page.

Thanks

Relatively new to CSS, never done anything sans tables. Yes, it all looks fubared right now, but as this is sort of a learning experience, I'd like to tackle one thing at a time. Positioning is...I'm not getting it.

Right now, the big thing is getting the "content" div to line up at the top. I've tried various combinations, and the one that works best so far (in Firefox and Safari, at least, IE is totally awful) is what I've got (relative, 25% in from the left) -- at least I get the thing lined up where I want it on the right. But I can't seem to get it to scoot up to the top. I played with the top margin, but that didn't do anything either.

The page is he http://www.describe.org/homework/esdcar/ (scroll down to see the problem)

The css is he http://www.describe.org/homework/esdcar/esdcar.css

And eventually, hopefully, it should look like this: http://www.describe.org/homework/esdcar_home.jpg

Yes, there's lots more to fix (the navigation, the announcements box, and so on) and I will be back with more questions, but I think if I can at least get this one fixed I can try fixing the other things on my own before giving up and seeking help again.

Is there a way to do an absolute position, and then position other things off of that?

For instance if you look at www.thechristianparent.com/test/ you will see a menu section on the left hand side. I want the place for links where you see test twice to be and auto height, so it adjusts accordingly. I then want to place a seporator div right below that and then have another link area. How do I position the dive below that?

I have a simple layout done all in CSS. The code is below. With the right boxes that are there, is there a way to make them stretch based on the content that's in them? Right now I'm using absolute positioning but if the content stretches the top box, then as you can see it stretches it into the next box. I tried changing it from absolute to relative and floating it to the right but the box just disappears then.

Also, is there another way to achieve the look I want (simple 3 column layout) by using CSS just in a different manner? I'd like it to adapt to any resolution that a user may have and I'm not quite sure how to do that.

Any help you can provide would be greatly appreciated. Thanks!

Code:

<html>
<head>
<title></title>
<style type="text/css">

.BODY{
background-color: #FFFFFF;
color: #000000;
}

.left{
position: absolute;
left: 10px;
width: 150px;
border: 1px solid;
height: 100%;
background-color: #EFEFEF;
color: #000000;
}

.center{
margin-left: 159px;
margin-right: 400px;
border: 1px dashed;
height: 25px;
background-color: #EFEFEF;
}

.right{
position: absolute;
right: 10px;
top: 85px;
width: 150px;
height: 100px;
border: 1px solid;
}

.right2{
position: absolute;
right: 10px;
top: 195px;
width: 150px;
height: 100px;
border: 1px solid;
}

.banner{
border: 1px solid;
height: 50px;
width: 100%;
}

.nav{
border: 1px solid;
height: 15px;
width: 100%;
background-color: black;
</style>

<div class="banner">Banner</div>
<div class="nav"></div>

<div class="left">
Nav
</div>

<div class="center">Center contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter content</div>

<p><div class="center">test</div></p>

<div class="right">
<b>Featured Article:</b>
<br />
<i><small>Featured article link goes here...</small></i>
<br /><br />

<b>Recent Articles:</b>
<br />
<i><small>Recent article links go here...
</div>

<div class="right2">
Test 2
</div>

I Need a div to be placed absolutely at 225left, 0right, 0top. In Firefox this works great the border I have around it seems to work just fine. The problem is IE. It doesnt seem to want to go all the way across.

I think the problem might be the position of my div. I have an outer layout file that has the header in it with the logo and whatnot for the site but sub sections of the site need their own logo to go Centered betwwen the right edge of the main site logo and the right of the screen. Since the sub sections have no idea about the outer layout I need them to absoutely position their own div. Here Is the code i'm trying to use.

Code:

<style type="text/css">
	.logo{
		position:absolute;
		top:0px;
		left:225px;
		right:0px;
		margin:0px;
		padding:0px;
		border:1px solid black;
		align:center;
	}
</style>
<div class="logo">
   <div align="center" style="width:100%;">
     <img src="images/showlogo.gif">
   </div>
</div> 

In firefox you see a border starting a 225 from the left and stretching 100% of the rest of the screen.

In IE its about 225 from either edge of the screen

I'm probably doing something stupid but I dont see it.

Hey people.

I'm kind of new to CSS (well not new, just unfamiliar), and I need to ask the old question about absolute positioning, which I haven't managed to find a satisfactory answer to on the net.

I downloaded a script for a drop down menu. The page on which it appears is made up of a table, and the headers of menu is in a row across the top. The menu items are in their own tables:

<div id="dropdown1" style="left: 257; visibility: hidden; width: 81; position: absolute; top: 299; height: 53">
<table class="popup" onmouseover="clearTimeout(timerID)" onmouseout="timerID=setTimeout('closeall()',200)" cellspacing="0" cellpadding="2" width="79" height="15" border="1">

<tbody><tr><td>Item 1<br>Item 2</td></tr> </tbody></table>
</div>

And as you can see, they use absolute positioning.
Unfortunately, this means that when I change the text size on my browser, the menu headers and the menu items are not aligned. I tried using table id=dropdown1, but this resulted in a huge gap between the menu headers and the rest of the page, where the hidden menu items were.

I realise changing text size will always be a problem when using absolute positioning in CSS, so I was wondering if anyone had any suggestions on an alternate method? Or if not, atleast what text size most people use, so I can set it to align for the majority of viewers? Or if it's possible to do a similar menu in a different (understandable) language?

I appreciate any help,

MKK

(Before you ask, no, the page is not online. I know this makes it harder to find a solution, but my webhosting company just disappeared - "failed to pay server bills", so I currently have no web space)

I am trying to create a page to be printed out as a letter but I cannot for the life of me make the footers stick to the bottom when printed.

Here is the code:

Code:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Header Test</title>
		<style type="text/css">
body {
	font-family:arial;
	font-size:10pt;
}
h1 {
	text-align:center;
	margin:0;
	padding:0;
}
div.letter {
	page-break-after:always;
}
.from {
	text-align:center;
}
.to {
	font-style:normal;
	margin-top:30px;
}
.date {

}
.footer {
	position:absolute;
	bottom:0;
}
		</style>
		<!-- compliance patch for microsoft browsers -->
		<!--[if lt IE 7]>
		<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
		<![endif]-->
	</head>
	<body>
		<div class="letter">
			<h1>Stanley Road Baptist Church</h1>
			<address class="from">
				Stanley Road, Morecambe, Lancashire, LA3 1UP
			</address>
			<address class="to">
				Joe Bloggs
			</address>
			<p class="date">
				Friday 27th August 2004
			</p>
			<p>
				Dear Joe,<br />
				Blah blah blah.
			</p>
			<p>
				Yours sincerely,
			</p>
			<p>
				Matt Fletcher
			</p>
			<div class="footer">
				The Footer In Question
			</div>
		</div>
		<div class="letter">
                 ...
		</div>
		<div class="letter">
                 ...
		</div>
	</body>
</html>

I can get it to stick to the bottom of only the first page, but it doesn't appear on any others.