CSS - How To Align Two Divs Under Each Other?

Hi, just a quick question. Say I have two input buttons (Just like the submit post/preview post buttons at the bottom of the forms).

Code:

<input type="submit" value="blah" />
<input type="submit" value="lol" />

If I want to align them in the center of the row that they're on, I've had to wrap them in a <div> with the text-align: center attribute on the div. Is there anyway to accomplish this same purpose without having to use wrapper <div>s?

I've been having problems trying to vertically align an image within a div. I'm trying to align it to the bottom of the div. CSS as follows:

#col1r1 {
float: left;
height: 40%;
width: 33%;
display: inline;
text-align: right;
}
div#col1r1 div#image {
bottom: 66%;
left: 60%;
color: black;
vertical-align: bottom;
}
div#col1r1 div img.pagegr {
width: 60%;
}

HTML:

<div id="col1r1">
<div id="image"><img class="pagegr" src="images/blah.gif" alt=""></div>
</div>

Unfortunately this code will be appearing on multiple pages with a different image on each page - some portrait, some landscape, and of varying sizes - otherwise, I would have added some blank space to the top of image itself to make it fit and sit nicely aligned with the bottom of the box.

I'd really appreciate some help. Thanks in advance.

I am trying to make to div tags enclosed inside another div tag align horizontally. I am trying to do this without absolute positioning. See image below

Any ideas? Thank you.

can anyone tell me why the control div with the links and the div to contain the images for my photo album do not look properly aligned?

link to photo Album can be found here but please note this is a dynamically set IP so is likely to change:

http://85.210.107.231/PA.html

I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically??

Code:

<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div>
<div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div>

</div>


<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div>
<div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div>

</div>

hi all...

i been having some trouble with this one, perhaps someone can guide me in the right direction...

Code:

.left_top{
	width:10px;
	height:100px;
	border:1px solid white;
	background-color:red;
	margin:0px;
	padding:0px;
	float:left;
	overflow:scroll;
}

.middle_top{
	width:10px;
	height:100px;
	border:1px solid blue;
	background-color:red;
	margin:0px;
	padding:0px;
	overflow:scroll;
}

.right_top{
	width:10px;
	height:100px;
	border:1px solid pink;
	background-color:red;
	margin:0px;
	padding:0px;
	overflow:scroll;
	float:right;
}

thats the code, it should be pretty clear as to what i'm trying, but here goes anyway...

i want the 3 divs to align side by side, in this order left/middle/right.
they are inside a <td> but it makes no difference if i make that a <div>... please help me out...

frank/

I have a header wrapper for a column heading that sets the width and background of the column header. In that column header I have a tag for the header title, which is aligned left.

Know, I find that the customer wants to add an "As of Date", on the same line, but wants it aligned right.

Is this even possible to do? I cannot seem to come up with the correct .css code that would allow me to do this.

html code

Code:

<div class="wide_column_header"><span class="headerbartext">Make Your Enrollment Selection</span><span class="headerbartextright">As of 3/31/2008</span></div>

css tags:
Code:

.wide_column_header {
  float:left;
  width:558px;
  margin:0 0 0 5px;
  background-image:url(../images/wide_header.jpg);
  height:21px;
  font-size:100%;
  font-weight:900;
  line-height:100%;
  vertical-align:bottom;
  color:#fff;}

.headerbartext {
  font-size: 12px;
  font-weight:bold;
  text-align:right;
  padding-left:15px;
  line-height: 140%;}

.headerbartextright {
  font-size: 12px;
  font-weight:bold;
  text-align:right;
  padding-right:15px;
  line-height: 140%;}

Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right.

To simplify my problem, look at this example.
Code:

<html>
  <body>
    <div style="float:right">
      Hello there!
    </div>
    <hr>    
  </body> 
</html>

If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly.

It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so:

Code:

<html>
  <body>
    <div style="border: 1px solid #000; ">
      <div style="float:right">
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
      </div>
      <div style="clear: both"></div>
    </div>
    <hr>    
  </body> 
</html>

Am I missing something fundamental here? Is there a better solution? Thanks in advance.

Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF.

Here's the site in Question: http://www.winchps.vic.edu.au

It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6.

Here's the CSS code for the basic layout:

Code:

body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}

#header {
width: 802px;
}

#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}

#content {
padding: 0px;
margin: 0px;
}

#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}

#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}

#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}

#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc).

Anyone got any ideas?

The Example

I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div.

How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content.

Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems:

In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box.

There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px.

Any help would be appreciated. Here's the code:

HTML:

Code:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="reset.css" />
		<link rel="stylesheet" type="text/css" href="testBox.css"> 	
	</head>
	<body>

		<div class="box">
			<div class="boxRowTop">
				<div class="boxCellLeft"></div>
				<div class="boxCellMiddle"></div>
				<div class="boxCellRight"></div>
			</div>
			<div class="boxRowMiddle">
				<div class="boxCellLeft"></div>
				<div class="boxCellMiddle"></div>
				<div class="boxCellRight"></div>
			</div>
			<div class="boxRowBottom">
				<div class="boxCellLeft"></div>
				<div class="boxCellMiddle"></div>
				<div class="boxCellRight"></div>
			</div>

	</body>
</html>

And here is the layout css file:

Code:

/* Box classes */
.box {
	background: rgb(120,120,120);
	height: 200px;
	width: 500px;
}
.boxRowTop {
	height: 16px;
	position: relative;
	width:%100;
}
.boxRowMiddle {
	height: auto;
	width:%100;
	position: relative;
}
.boxRowBottom {
	height: 16px;
	width:%100;
	position: relative;
}
.boxCellLeft {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 16px;
}
.boxCellMiddle {
	height: 100%;
	margin-left: 16px;
	margin-right: 16px;
	width: auto;
}
.boxCellRight {
	height: 100%;
	left: 100%;
	position: absolute;
	top: 0;
	width: 16px;
}


/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
	background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
	background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
	background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
	background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
	background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
	background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
	background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
	background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
	background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}

And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them.

Code:

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, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
}

* {font-size:1em; font-family: inherit;}

:focus {outline:none;}

body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */

p {	margin: 0 0 1.2em 0; }

a			{ color:#ff0000;	text-decoration:none; }
a:link		{ color:#ff0000;	text-decoration:nonee; }
a:visited	{ color:#ff0000;	text-decoration:none; }
a:active	{ color:#ff0000;	text-decoration:none; }
a:hover		{ color:#ff0000;	text-decoration:none; }

a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
	font-weight:bold;
	display:block;
	text-decoration:none;
	color:Black;
}

h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */

fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }

textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }

small { font-size:.9em; }

ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul,   ul ol,   ul dir,   ul menu,   ul dl,
ol ul,   ol ol,   ol dir,   ol menu,   ol dl,
dl ul,   dl ol,   dl dir,   dl menu,   dl dl,
dir ul,  dir ol,  dir dir,  dir menu,  dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
	margin:0;
	padding: 0 0 0 1.5em;
}

hr { margin:0.75em 0; padding:0; }

Any help would be GREATLY appreciated, as I've been working on this for a while!

Thanks!

I can usually figure out most CSS problems but this one is a mystery.

The following creates a curved box by covering the corner with an image. The problem is in IE6.0, the corner images do not align at the top but display about 10 pixels below it, so therefore I have a the box line and corners at the top and then the curved corners below it. Other browsers display fine, including IE7.0.

Why is it doing this?

Here is the CSS:

Code:

<style type="text/css">
.contain {
position:relative; top:0; left:0; text-align:left; padding:0; border:1px solid #ccc; margin:0 0 10px 0; background-color:#fff; vertical-align:top;
}
.corner-top { display:block; font-size:0; line-height:0; margin:0; height:8px; width:100%; position:relative; top:-1px; right:-1px; background:transparent url(/images/crn_tr_bb.gif) no-repeat top right;}
.corner-top .corner-left { display:block; font-size:0; line-height:0; margin:0; height:8px; width:8px; position:relative; left:-2px; background:transparent url(/images/crn_tl_bb.gif) no-repeat top left; }
.corner-bottom { display:block; font-size:0; line-height:0; margin:0; height:8px; width:100%; position:relative; bottom:-1px; right:-1px; background: transparent url(/images/crn_br_bb.gif) no-repeat bottom right;}
.corner-bottom .corner-left { display:block; font-size:0; line-height:0; margin:0; height:8px; width:8px; position:relative; left:-2px; background: transparent url(/images/crn_bl_bb.gif) no-repeat bottom left; }
</style>

<div class="contain">
	<div class="corner-top"><div class="corner-left"></div></div>
    <div class="intro" style="position:relative;"><p>Text here...</p>
	<div class="corner-bottom"><div class="corner-left"></div></div>
    </div>

here is the page...
emarketing and design . com /spa/

Its the "sign up for specials and promotions" with sign up box..

how do I get it to flush right?

here is my css--it's "newsletter" (this is my first try with css - be nice)


p
{
margin: 0.4em 0.5em;
font-size: 0.85em;
}

a
{
color: #197EF1;
text-decoration: underline;
}

a:hover
{
color: #DF3A00;
text-decoration: none;
}

a img
{
border: none;
}

ul, ol
{
margin: 0.5em 2.5em;
}

h2
{
margin: 0.6em 0 0.4em 0.4em;
}

h3, h4, h5
{
margin: 1em 0 0.4em 0.4em;
}

*
{
margin: 0;
padding: 0;
}

body
{
background: #000000 0 0;
color: #a9a9c7;
font-size: 1em;
font-family: "Trebuchet MS", Tahoma, "Geneva CE", lucida;
}

#container
{
margin: 0 auto;
width: 770px;
position: relative;
}

#top
{
height: 50px;
background: url("image/top.jpg") 0 0 no-repeat;
}

#top p
{
margin: 0;
padding: 0;
}

#header
{
height: 150px;
margin-top: 0px;
background: url("image/header1.jpg") 0 0 no-repeat;
}

#menu
{
position: absolute;
top: 152px;
left: 0px;
}
#newsletter
{
position: absolute;
top: 0px;
}

#content
{
clear: both;
margin-top: 23px;
width: 770px;
background: url("image/content.gif") 0 0 repeat-y;
}

#text
{
width: 518px;
background: #313040 0 0 no-repeat;
color: #9c9cd0;
float: left;
}

#column
{
float: right;
width: 247px;
background: #414169 url("image/column.gif") 0 0 no-repeat;
}

#content-bottom
{
clear: both;
display: block;
width: 770px;
height: 13px;
background: url("image/content-bottom.gif") left bottom no-repeat;
font-size: 0;
}

#footer
{
margin-top: 5px;
padding-top: 2px;
height: 33px;
background: url("image/footer.png") left bottom no-repeat;
}

#header h1
{
margin: 5px 0 0 50px;
padding: 0;
font-size: 1.2em;
}

#header h2
{
margin: 10px 0 0 90px;
padding: 0;
font-size: .3em;
color: #9c9cd0;
}

ul#menu
{
margin: 0;
}

#menu li
{
list-style-type: none;
float: left;
text-align: center;
width: 80px;
margin-right: 1px;
font-size: 1.05em;
}

#menu a
{
display: block;
height: 18px;
padding-top: 1px;
text-decoration: none;
background: #414169 no-repeat 0 0;
overflow: hidden;
width: 100%;
font-size: .75em;
font-family: Verdana, "Geneva CE", lucida, sans-serif;
color: #fff;
}

ul#newsletter
{
margin: 0;
}

#newsletter li
{
list-style-type: none;
float: right;
text-align: center;
width: 290px;
margin-right: 0px;
font-size: 1.05em;
}

#newsletter a
{
display: inherit;
height: 18px;
padding-top: 1px;
text-decoration: none;
background: #414169 no-repeat 0 0;
overflow: hidden;
width: 100%;
font-size: .75em;
font-family: Verdana, "Geneva CE", lucida, sans-serif;
color: #fff;
}
#menu li>a, #menu li>strong
{
width: auto;
}

#menu a.actual
{
background: url("image/menu-actual.gif") no-repeat 0 0;
color: #952020;
}

#menu a:hover
{
color: #ff5900;
}

#column p
{
font-size: 0.7em;
}

#column ul
{
font-size: 0.8em;
}
#column h2
{
position: relative;
height: 26px;
width: 215px;
margin-top: 40px;
padding-top: 6px;
padding-left: 6px;
font-size: 0.7em;
background: url("image/h3-column.gif") 0 0 no-repeat;
z-index: 1;
font-family: arial, "Geneva CE", lucida, sans-serif;
}
#column h3
{
position: relative;
height: 5px;
width: 215px;
margin-top: 4px;
padding-top: 2px;
padding-left: 6px;
font-size: 0.8em;
background: url("image/h3-column.gif") 0 0 no-repeat;
z-index: 1;
font-family: Arial, "Geneva CE", lucida, sans-serif;
}

#column h3 span
{
margin-left: 10px;
}

#column span.name
{
text-align: right;
color: #9c9cd0;
margin-right: 5px;
}

#column a
{
color: #9c9cd0;
}

#column a:hover
{
color: #9c9cd0;
}

#text h1,#text h2,#text h3,#text h4
{
color: #a9a9c7;
}

#text h3.headlines a
{
color: #a9a9c7;
}

p.comments
{
text-align: right;
font-size: 0.8em;
font-weight: bold;
padding-right: 10px;
}

#footer p
{
text-align: center;
}

#footer a
{
color: #9c9cd0;
}

#footer a:hover
{
color: #DF3A00;
}

#your-url
{
position: absolute;
left: 70px;
top: 15px;
font-size: 1.1em;
}

#your-url a
{
color:#9c9cd0; text-decoration:none;
}

#your-url a:hover
{
color: #9c9cd0;
}

ol.comments
{
font-size: 0.9em;
}