CSS - Containers And Positions

hey all,
hopefully someone in here will be able to help me. what I am interested in is how to tell a div to render at the base of the page, once I have it there I intend to make it float so that it is always at the base. does anyone know the x,y positions for the very bottom of the displayed window? any help would be greatly appreciated, thanks in advance.

i am working for a client that is strict on making sure that all code is up to standards.

the question i have is, how can i use the same class container twice in the same page and have everything up to standards?

the catch is the doctype has to be XHTML 1.0 Transitional and i can't have the same id twice on the page. i'd hate to make 2 classes for the same style.

any suggestions?

Code:

<ul id="headerfooter">
<li><a href="link1.html">header link 1</a></li>
<li><a href="link2.html">header link 2</a></li>
<li><a href="link3.html">header link 3</a></li>
</ul>

Code:

<ul id="headerfooter">
<li><a href="link1.html">footer link 1</a></li>
<li><a href="link2.html">footer link 2</a></li>
<li><a href="link3.html">footer link 3</a></li>
</ul>

I have partially succeeded in making a table of products that changes column number depending on page width. The magic of DIVs. It's been a dream of mine . LOL.

Problem is I can't figure out how to center the shown container objects in each row. So, unless the width of your browser is just right, everything ends up off-center. (http://www.harpgallery.com/showroomdetail/cat_id/4/)

I've been looking at how Newegg does it, but I just can't figure out what they've done to get their containers to dynamically resize and float like they do. It's a work of CSS art for sure.

I snipped out the code I'm using to make the page. I was hoping some of you here would have some ideas? Thanks!

Code:

--The HTML--
<table border='0' cellpadding='2' cellspacing='2' bgcolor='#000000' width=100%>
<tr><td>
<div id='HomepagePrd'>
  <div class='Section'>
     <div class='product'>
       <div class='prodImage'><a href='Product URL'><img Border='0' src='Image URL' height=150 align='top' /></a>
       </div>
       <div class='desc'>
          <h3><a href='$PDurl' ><font color=white face=georgia,arial>Product Name</font></a></h3>
       </div>
     </div>
  </div>
</div>
</td></tr>
</table>


--The CSS--
#HomepagePrd{width:100%;clear:both;min-width:472px;}
.Section{float:left;width:240px;}

.product{
	position:relative;
	width:100%;
	margin:5px 2px 2px 5px;
	height:180px;
}
.prodImage{text-align: center;position:relative;width:100%;}
.desc{position:relative;width:100%;margin:0px;padding:0px;}
.desc h3{text-align: center;font-size:12px;margin:0px;padding:0px;}

Greetings,

I posted this question in the HTML forum, too, but I realize that maybe the answer to this question would better be provided by CSS2, rather than using HTML tables, as the latter may be deprecated in the future--it seems--as a layout tool.

I used to be able to position an image, or anything basically, in a table cell that is in the "absolute middle" of a web page, i.e. centered horizontally and vertically, using Dreamweaver MX. But, for some weird reason, I cannot do it anymore using Dreamweaver MX 2004. No matter what I try, the image or contents of the cell or table are always at the top of the page, centered horizontally, yes, but not vertically.

I tried nesting a table within a table, and I tried using a percentage-based 3x3 table, but nothing works. I noticed that the "height" attribute of a table is deprecated now, thus, you should not give a table a "height" of 100%. Is that the reason? And if so, then what is another way to do this now? I mean putting an image or so in the absolute middle or center of a page? Better yet...

What I really want to do is to place an image in the vertical center of a page, yet a bit to the side, but within proportion to the page of the visitor. Meaning, I'd like the center of the image, for example, to always have 50% of the page over it and 50% below it, exactly; and I'd like it to have 33% of the page to its right side, for instance, and 66% to its left side, always, regardless to the visitor's resolution. Now how can I do this, especially using Dreamweaver MX 2004?

Thanks for anyone taking the time to help. I'll try to attach an image to demonstrate what I mean visually.

http://forums.devshed.com/attachmen...tachmentid=4599

I am so glad that I found somewhere where I might be able to get some help! Currently brain is running so hot its close to seizing or exploding!

I have a page design which has three columns each of which has a number of divs within it and a footer all contained within an empty_centre div.

Each of the three columns has a container sidebarContainerLeft, midContainer, sidebarContainerRight and all of these are in a contentContainer.

So, when filled with content the sidebarContainerLeft and sidebarContainerRight are correctly increasing the height of the contentContainer and the footer is correctly positioned.

However when the content in the midContainer exceeds the height of sidebarContainerLeft and sidebarContainerRight the contentContainer is not increasing in height and the footer overlaps the contents of the midContainer!

I am completely stuck and wondered if someone could help me!!

results with skitch can be seen he -

good www.rcm01.f2s.com/tmp/GoodRight.html.jpg
good www.rcm01.f2s.com/tmp/GoodLeft.html.jpg
bad www.rcm01.f2s.com/tmp/BadMiddle.html.jpg

html:-

Code:

<body>

  <!-- This is 'empty_center' -->
  <div id="empty_centre" >

	<div id="contentContainer" >
	
		<div id="midContainer">
			<div id="content" class="textcontent" >
				Main content goes here
						</div>
			<div class="clear"></div>
			<div id="content2" class="textcontent" >
				Another content set goes here
				
			</div>
		</div>
		
		<div id="sidebarContainerLeft" >
			<div id="phonebar" >
				phone number
			</div>
			<div id="adbar1" >
				advert 1
			</div>
			<div id="adbar2"  >
				advert 2
			</div>
		</div>
				
		<div id="sidebarContainerRight" >
			<div id="twitter" >
				twitter posts go here
			</div>
			<div id="newsletter"  >
				newsletter signup goes here
						</div>
		</div>

		<div class="clear"></div>
	
		<div id="footer" class="textcontent"  >
				footer goes here
		</div>
		
	</div>
   
 </body>
</html>

css:-




Code:

#empty_centre {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 940px;
  margin-left: -470px;
  height: auto;
  z-index: 1;
  }


.clearpad {
	width: 100%;
	height: 65px;
	margin: 0 0 -1px;
	clear: both;
	}

.clear { clear: both; }


/* Page */

#contentContainer {
	border-style: dotted;
	height: auto;
	position: absolute;
	width: 940px;
}

#midContainer {
	float: left;
	border-style: dotted;
	position: absolute;
	left: 190px;
	width: 460px;
}

#content {
	position: relative;
	background-image:url('./opaquefiller.png');
	padding-right: 10px;
	width: 400px;
	margin-left: 20px;
	padding: 10px 10px 10px 10px;
	}

#content2 {
	position: relative;
	background-image:url('./opaquefiller.png');
	width: 400px;
	height: auto;
	margin-left: 20px;
	margin-top: 10px;
	padding: 10px 10px 10px 10px;
	}

#reviews {
	position: relative;
	background-image:url('./opaquefiller.png');
	margin-top: 10px;
	padding-right: 10px;
	width: 490px;
	padding: 10px 10px 10px 10px;
	margin-left: 10px;
}


/* Sidebar */

#sidebarContainerRight {
	border-style: dotted;
	position: relative;
	float: right;
	width: 270px;
}

#sidebarContainerLeft {
	border-style: dotted;
	position: relative;
	float: left;
	width: 180px;
}


#phonebar {
	background-image:url('./opaquefiller.png');
	position: relative;
	width: 160px;
	min-height: 30px;
	height: auto;
	padding: 10px 10px 10px 10px;
	}
	
#adbar1 {
	background-image:url('./opaquefiller.png');
	position: relative;
	width: 160px;
	height: auto;
	margin-top: 10px;
	padding: 10px 10px 10px 10px;
	}
	
#adbar2 {
	background-image:url('./opaquefiller.png');
	position: relative;
	width: 160px;
	height: auto;
	margin-top: 10px;
	padding: 10px 10px 10px 10px;
	}
	
adbar3 {
	background-image:url('./opaquefiller.png');
	position: relative;
	width: 160px;
	height: auto;
	margin-top: 10px;
	padding: 10px 10px 10px 10px;
	}

#twitter {
	background-image:url('./opaquefiller.png');
	position: relative;
	width: 210px;
	height: auto;
	padding: 10px 10px 10px 10px;
}


#newsletter {
	background-image:url('./opaquefiller.png');
	position: relative;
	width: 210px;
	min-height: 150px;
	height: auto;
	margin-top: 10px;
	padding: 10px 10px 10px 10px;
}

/* Footer */

#footer {
  position: relative;
  background-image:url('./opaquefiller.png');
  margin-top: 10px;
  width: 940px;
  height: auto;
  z-index: 3;
}

Thanks for taking the time to read my question.

I have two containers that I want to line up at the top. I can't seem to make them line up.

I have a picture inside a <div>, then I have a paragraph. It works in IE7, but in FF, the <p> appears under the picture. If I put a width on the <p> it moves up, but never up all the way so that it is inline with the picture.

I'm stumped and not sure what to do. I tried putting display:inline; on either classes, and on both classes at the same time. Not sure what else to do.

If I put a width on the <p>, it looks like this in FF

|------|
|Icon | |---------------------------|
|------| | ElevatorSpeech ES2..........|
.............|---------------------------|


It looks like this if I have no width on <p>

|------|
|Icon |
|------|

|---------------------------|
|ElevatorSpeech ES2...........|
|---------------------------|


HTML:
Code:

        <div class="ESContainer">
	        <p class="Title1">Control</p>
            <div class="Icon"><img src="Images/Remote.jpg" align="Zone All Control Remote Control" /></div>
            <p class="ElevatorSpeech ES2">Control your surroundings with confidence, get the results you deserve.</p>
            <p class="ElevatorFull"><span class="EFLargeText">Zone-All</span> has been manufacturing room comfort temperature controls for more than two decades. Its variable air volume and variable temperature solutions for zone controls are applicable to heating and cooling systems that are designed using both incremental HVAC units and central station air handlers.</p>
        </div>

CSS:
Code:

.Icon {
float: left;
margin-left: 10px;
padding: 0px;
height: 100px;
background-color:#FF0000;
}

.ElevatorSpeech {
font-size: 19px;
margin-left: 10px;
margin-right: 10px;
float: left;
padding: 0px;
/*width: 225px;*/
background-color:#FFFF00;
}

Thanks,

Brad

Hi, i need a bit of help here.. i got my page up and running perfectly on FF but as for IE7.. well it does load!

I have problems with the right menu, the div's i use as containers are not working as they suppose to do.

plz see for youself www.soyunapendeja.com.ar

can i get a litle help here?

Thank you.

Please take a look at a site I'm developing:
http;//www.b4itwascool.com

The CSS is he
http://www.b4itwascool.com/css/main.css

I'm also using a Lightbox 2.0, so that CSS is he
http://www.b4itwascool.com/css/lightbox.css


1. There is a lot of extra space below the footer. I assume this is where the containers would have been had I not relatively repositioned them? How do I remove this space?

2. I want the right "steel" beam to repeat-y to the bottom of the page. I don't know why that's not working.

3. If you click the top links, you will see that sometimes the footer falls within the left "column", and sometimes it falls within the right column. How do I ensure it always falls to the right, like the way it appears on the homepage?


thanks for any advice!

If you are getting results as in the above image, simply add "clear:both;" to the container (blue) div which you do not want affected and it will flatten its ceiling and stop any float's escaping.

-Luke

When I am floating two containers or images my background color disappears. Why is that and what should I do instead?

Here is what I am doing:

<div class="contentWrapper">
<div class="content">

<div class="leftContent">
<img src="" alt="" />
</div> <!-- end leftContent -->


<div class="rightContent">
<img src="" alt="" />
</div> <!-- end rightContent -->


</div> <!-- end content -->
</div> <!-- end contentWrapper -->


Now the css:


.contentWrapper {
margin: 0;
padding: 0;
width: 100%;
}
.content {
margin: 0 auto;
padding: 0;
width: 960px;
background: #ccc;
}
.leftContent {
margin: 0;
padding: 0;
width: 450px;
float: left;
}
.leftContent img {
margin: 0;
padding: 0;
width: 200px;
height: 200px;
border: #000 solid 1px;
}
.rightContent {
margin: 0;
padding: 0;
width: 450px;
float: right;
}
.rightContent img {
margin: 0;
padding: 0;
width: 200px;
height: 200px;
border: #000 solid 1px;
}

Thanks!

Hello all.

I've got a layout with three columns. The first column contains the navigation and the second two are variable content. All the columns can be any length, and consist of any number of divs; each div is a bordered block of variable-sized content.

The problem is if I want to float an image around some text in the second or third column. Since the image is floating, its container doesn't extend fully, and the image overlaps the border and the block below it. However, if I put a "clear: both" spacer within the block, then the container clears elements in the left or right columns, and extends way too far down!

What I really need is a way to just clear a single level of nesting, but "clear" seems to be pretty much all or nothing.

I've also tried the pseudoclass :after trick to extend the box, but that didn't appear to do any good. It just added the content inside the border of each block, but doesn't enclose the image at all.

I hope somebody has suggestions - I actually haven't found anything about this problem, but perhaps I'm just looking for the wrong terms. It seems like a fairly fundamental thing to do...

Thanks!

Hi all

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  	<title>untitled</title>
  </head>
  <body>
    <table style="margin-bottom: 10px;" cellspacing="0" cellpadding="0">
      <tr>
        <td>asdf</td>
      </tr>
    </table>
    <p style="margin-top: 10px;">asdf</p>
  </body>
</html>

Why do the margin-bottom of the table and the margin-top of the p not collapse (only tested in Firefox2)? Why is there 20px between them? I don't understand the world of margins anymore...

Is this an exception or a bug or what?

Thanks for help,
Josh

Hi guys!

Ok here's the thing, I've tried everything I know and hunted the net trying to find an answer, and just when I think I have, another issue crops up. Sorry about the title but I just don't know what to call what it is I'm trying to do. But it SHOULD be possible, and it SHOULD be really simple, which is frustrating the heck out of me because I cannot get this to work!

Here is what I'm trying to do, complete with pictures to help visualize things.

Example
This shows how I want my site layout to appear. A regular width site so it can be displayed on low res desktops, BUT with extra artwork on the left and right, complete with a couple of flash animations to the sides.

Code:

http://img708.imageshack.us/img708/2458/layoutstyle.jpg

The red outline shows a typical 800x600 display, as you can see, they should only be able to see what's in the center of the page.

The dark blue outline shows a much higher resolution display

The light blue color shows the extra artwork only revealed to higher resolutions

The flash boxes contain flash elements which should remain fixed in those locations regardless of the resolution the user is using (they'd be setup to match the background image, so must not move)

The dark blue outline shows how the same site would look on a much higher resolution. Instead of black space to the left or right, or the actual site stretching to fit (not looking for a liquid layout in this case), they get to see the rest of the artwork, plus the flash elements.

The purpose of this is so it will look fine on low resolution displays, but also, when viewed on higher resolution displays, will then show the extra artwork instead of blackness.


Problems
Just when it looks like it might work, I find that each browser displays things incorrectly, pixels, picas, ems, etc. and so on. How do I get it to work across the board? I don't want to be unprofessional and do the "This site should only be viewed in X browser".

The flash enabled parts always wrap and refuse to appear off screen, how do I fix this? When I place them, I want them to stay exactly where they are (which is offscreen on a low resolution, but visible on a higher resolution), not bunch up and move out of place.

I can get the actual background to appear correctly, so when resizing the browser, it remains fixed in the center and reveals the rest of the artwork both left and right. But other elements simply refuse to behave correctly (see first problem, this happens especially with browsers not rendering the same things the same, such as pixels etc. being done differently in each browser).


If you want a real world example of what I'm trying to achieve, please view the following website:

Code:

http://us.blizzard.com/diablo3/?rhtml=y

unfortunately I have no idea what language they used and it looks unreadable to me, so borrowing from view source isn't an option for me in this case (I use Dreamweaver, css and php, and have no understanding of xml or whatever it is they're using, neither do I have the time to learn another language).

Is there anyone who can help me here, cause this is REALLY frustrating me now, it should be incredibly simple but it's not, and I feel as if I'm being forced to abandon everyone who doesn't have X display and X browser. Which I don't want to do.


P.S. Sorry about the weird links, seems new accounts can't use url's *shrugs*.