mreddy
-
Posts
7 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by mreddy
-
-
Thank you for your reply! However... that does not really help me much. It certainly fixes my example. But let's say that I have multiple changing images that have different heights. I want them all to always be aligned to the bottom. I guess this could be done by dynamically finding out the height of each image and adjusting the margin accordingly.But what I really would want is a universal vertical-aligning-thingie...
-
Thanks for your answer, but No. That pusher-div does not align the a, b and c divs to the bottom, it merely moves them down by X pixels. The ABC are different heights so they need to be aligned - so A moves X pixels, B moves Y pixels and C moves Z pixels down..Is it really this bloody difficult?And NO, absolute positioning is not an option.Oh yeah, and here is the source:
<html><head><title></title><style type="text/css"><!--#outerbox{width:500px;height:200px;border-style:solid;border-width:1px;}#leftbox{width:100px;height:100px;border-style:solid;border-width:1px;float:left;}#rightbox{width:100px;height:50px;border-style:solid;border-width:1px;float:right;}--></style></head><body><div id="outerbox"><div id="leftbox"></div><div id="rightbox"></div><div id="rightbox"></div></div></body></html> -
How do I float image A left and image B and C right aligning them vertically to the bottom of the parent box???This is what I have.This is what I want.
-
Doesn't really answer my question but thanks anyway.Use overflow:auto, and scrollbars will only appear when needed.Chris
-
Hello,My guess is that the :'s are reserved for pseudo-classes and you can't use them for anything else. But that is just my guess
-
I haven't done any web design in quite a while. Now I find that different browsers still render css properties differently. Sad..Issue 1:Using overflow=hidden and padding:xx results in the bottom of the element not having a padding if the content actually flows over. You can see this here http://www.w3schools.com/css/tryit.asp?fil...trycss_overflow by adding padding:30px;. This is the same for both browsers.Issue 2:Using the same link and adding the padding and setting overflow:hidden, we can see that IE uses the padding inside the element and Firefox actually expands the element. Thus the padding property is completely unusable?Question:Is there a place where all the properties that are rendered differently on different browsers are listed, so I would not have to test everything?Thanks for Your time.-Eddy
CSS Layout question
in CSS
Posted
Hi,I am not an expert... but adding float:left to your #bottom fixed the positioning. Plus removing the text-align:center from the body and adding margin:auto to main seems to fix your layout.Hope this helps,Eddy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"><title>Untitled Document</title><style>body { font-size:11px; color:black; line-height:14px; width:100%; height:100%; margin:0px; padding:0px; font-family:Tahoma,Verdana,Arial;}#main { width:727px; margin:auto;}#menu { background-color:#FFCCFF; width:100%; height:114px;}#hand { width:502px; height:150px; float:left; clear:none; background-color: #9999FF;}#content { background-color: #00CCCC; width:502px; height:157px; float:left; clear:none;}#right { width:225px; height:200px; float:right; clear:none; background-color: red; text-align:left;}#bottom { width:100%; float:left; height:100px; text-align:left; background-color:yellow;}</style></head><body><div id="main"> <div id="menu"></div> <div id="hand"></div> <div id="right"></div> <div id="content"></div> <div id="bottom"></div></div></body></html>