CSS - Migrating To Css, Inline Divs

Hi, I have been puzzle for a while now working out how to do this.

I have two fixed height divs which I want to appear on the same line (inline). However to maintain the fixed height they cannot be set as display: inline; (Well that works in IE but not in Firefox).
Anyway I find out that setting one div to float left and the other to float right with another div with clear:both works fine. However when it comes to setting the position of the flash elements I want in each div element it works now in Firefox but not in IE.

I currently have:
<div id="diva">
<object id="face1" width="320" height="110">
<param name="face1" value="face1.swf">
<embed src="face1.swf" width="320" height="110">
</embed>
</object>
</div>
<div id="divb">
<object id="face2" width="320" height="110">
<param name="face2" value="face2.swf">
<embed src="face2.swf" width="320" height="110">
</embed>
</object>
</div>
<div id="clear"></div>

With the relavent css:
#div1 {
background-image : url(images/bg1.gif);
width: 381px;
height: 346px;
float: left;
text-align : center;
vertical-align : bottom;
}
#div2 {

background-image : url(images/bg2.gif);
width: 381px;
height: 346px;
float: right;
text-align: center;
vertical-align : bottom;
}
#clear { clear: both; }
img {
border: 0px;
}
#face1{

padding-top: 220px;
left: 30px;
}
#face2{
position: relative;
top: 220px;
left: 10px;
}


Effectively what I want is:
Where the divs are on the same line and are fixed height (as they have a background) and then each swf element releatively positioned inside the div...which will work in Firefox and IE!

Thank you for your time.

Okay, so finally I've taken the plunge to DIVs from TABLEs after everyone raves above the benefits CSS.

I've almost finished the outline of my page but I want the
shadow of the main box to have a dynamic width.

This is what i've ascertained from the code around on the web. I think I may have made it more complicated then
necessary... My problem is when you adjust the size of the
window, the shadow image in #bottom won't automatically
adjust. What I think I need is a way to make #bottomright
overwrite what is in #bottom.

Any help would be GREATLY appreciated!

The page:
---------
http://www.jmusician.com/temp.php

my HTML code:
--------------
<div id="header">
<img src="./graphics/main_heading.gif">
</div>

<div class="container">
<div id="topleft">
</div>
<div id="topmiddle">
</div>
<div id="topright">
</div>
</div>

<div class="container">
<div id="left">
</div>
<div id="main">
</div>
<div id="right">
</div>
</div>


<div id="btmlink1">
<a href="" border="0"><img border="0" src="./graphics/bottom_link_bio.gif"></a>
</div>

<div id="btmlink2">
<a href="" border="0"><img border="0" src="./graphics/bottom_link_comp.gif"></a>
</div>
<div id="btmlink3">
<a href="" border="0"><img border="0" src="./graphics/bottom_link_perf.gif"></a>
</div>

<div id="btmlink4">
<a href="" border="0"><img border="0" src="./graphics/bottom_link_rep.gif"></a>
</div>

<div id="btmlink5">
<a href="" border="0"><img border="0" src="./graphics/bottom_link_teach.gif"></a>
</div>

<div id="bottom">
</div>

<div id="bottomright">
</div>

my CSS code:
------------
html, body {
margin: 5px 3% 3% 3%;
padding: 0;
background-color: #EEE3B9;
color: #FFFFFF;
}

//I realised that the code for container isn't
//absolutely necessary
.container{

}


#topleft {
margin: 0px;
float: left;
padding: 0px;
background-color: Black;
width: 8px;
}

#topmiddle {
float: left;
padding: 0px;
margin: 0px;
width: 100%;
background-color: Black;
clear: right;
}

#topright {
float: right;
padding: 0px;
margin: 0px;
width: 8px;
background-image: url(../graphics/inner_top_right.gif);
background-repeat: no-repeat;
clear: right;
}


#left {
margin: 0px;
float: left;
padding: 0px;
background-color: Black;
width: 8px;
height: 400px;

}
#main {
float: left;
padding: 0px;
margin: 0px;
width: 100%;
background-color: Black;
height: 400px;
clear: right;
}

#right {
float: right;
padding: 0px;
margin: 0px;
width: 8px;
background-image: url(../graphics/inner_right.gif);
background-repeat: repeat-y;
height: 400px;
clear: right;
}

#btmlink1 {
margin: 0px;
float: left;
padding: 0px;
background-color: #EEE3B9;
width: 134px;
height: 36px;
clear: right;
}

#btmlink2{
margin: 0px;
float: left;
padding: 0px;
background-color: #EEE3B9;
width: 128px;
height: 36px;
clear: right;
}

#btmlink3{
margin: 0px;
float: left;
padding: 0px;
background-color: #EEE3B9;
width: 173px;
height: 36px;
clear: right;
}

#btmlink4{
margin: 0px;
float: left;
padding: 0px;
background-color: #EEE3B9;
width: 136px;
height: 36px;
clear: right;
}
#btmlink5{
margin: 0px;
float: left;
padding: 0px;
background-color: #EEE3B9;
width: 133px;
height: 36px;
clear: right;
}


#bottom {
float: left;
padding: 0px;
margin: 0px;
background-image: url(../graphics/inner_bottom.gif);
background-repeat: repeat-x;
width: 30%;
clear: right;

}


#bottomright {
float: right;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: -8px;
background-image: url(../graphics/inner_bottom_right.gif);
background-repeat: no-repeat;
width: 8px;
position: static;
clear: right;

}


THANKS!
justin

Hello. My first post at this section
I'm trying to familiarize with all the positioning properties in CSS but got stuck when trying to migrate the table at the bottom of this code, to div blocks:
Code:

<!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></head>
<style>
body
{
	margin: 0;
	padding: 0;
	font-size: 90%;
	font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
	background-color: #FFF;
	color: #000;
}
table, div {
	padding: 15px;
	margin: 0;
	background-color: #464646;
	height: 30px;
	width: 100%;
}
tr, div div {
	color: #FFFFFF;
	font-size: 18px;
	height: 100%;
}
</style>
<body>
<table class="top"><tr><td>Product Name</td><td align="right">Company Name</td></tr></table>
</body>
</html>

I tried wrapping two <span> inside a <div> and float the second <span> to the right, but from what I read so far, floating is not the solution because it sets the element as a block even if it's inline.

Although it works using plain old tables - btw why is IE rendering a somewhat different page then FF? - and I should follow the KISS rule I want to learn how can I make this work.

Thank you a lot!

Like many PHP programmers, I've been migrating from table-based design to CSS for a few websites now, but there's still a problem I've yet to get around.

Most dynamic websites have at least one page that displays a number of dynamic results that need to be displayed in a tabular format. That is, you need to display variable results in orderly columns and rows. Traditionally, this has been done with html tables. No problem. Tried and true.

But WC3 has recommend the migration away from tables. Thus, I feel like I'm a "bad" web developer when I resort back to using tables for the dynamic results on my otherwise CSS-based page.

Question: since this is a problem that many PHP programmers currently face, has anyone found a good resource for information on this problem? Is it even possible?

I've purchased several CSS books and have combed through many websites, but I've never found information relevant to the dynamic design that we PHP programmers face.

In fact, the O'Reilly book seems to indicate that it's not possible to achieve tabular layout without using tables:


Quote:
Tables are unique, compared to the rest of document layout. As of CSS2.1, tables alone possess the unique ability to associate element sizes with other elements--all the cells in a row have the same height, for example, no matter how much or how little content each individual cell might contain. The same is true for the widths of cells that share a column. There is no other situation in layout where elements from different parts of the document tree influence each other's sizing and layout in so direct a way.

- p.331, Cascading Style Sheets: The Definitive Guide, Second Edition by Eric A . Meyer, (c) 2004, O'Reilly Media, Inc.


So before I give up my search, I thought I'd post to this forum to see if anyone has found a good solution.

Many thanks,
Steve Stringer

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!

Hello everyone,

I'm working on this page http://jordanmeeter.com/photos/sets/ and I want to get the set description inline with the <h2>. I can just baaaaarely remember how to do it, but everything I'm trying doesn't work. Can someone help me out?

Thanks,
Jordan

The Problem: I want my logo (a gif image) to justify to the left but padding centers it.

Is there a way to NOT pad one "cell" in an inline navigation bar using css without affecting the rest which follow (which are padded)?

Please email me for urls to see exactly what I'm working with.

Many thanks in advance!

Hi there...

Simply enough, I'd like to get my column widths (for the "menu" and "content" div's) appearing in IE5+ as they do in Firefox.

URL: http://www.cbaa.org.au/3cfor_web/ejournal_header.html
CSS: http://www.cbaa.org.au/3cfor_web/layout2.css

I've tried this technique: http://glish.com/css/hacks.asp but I'm not sure what I'm doing wrong.

Any help greatly appreciated.

I am new to this forum and need some help!

I am creating a page and the sidebar has links. I have a graphic link that I DO NOT want highlighted. I have tried everything I can think of, but I don't think I am able to apply the link styling as an inline style, or am I wrong. Any help would be appreciated!

http://annesweb.com/abramoff/

Sometimes CSS makes me want to tear my hair out.

I'm trying to make a custom form input that is a combination of a regular select drop down and a multiple select. I have the javascript all sorted out and my input works like a charm. I can't figure out any way to make it display like a <select> does though.

I thought I could simply do this: <ul style="display: inline">
According to w3schools, this will tell the element to display without a line break before or afterward. Much to my despair, it's not that simple.

Here's an example:
Code:

<div>
This is some text
<select name="test">
<option value="">Click to expand</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<input type="submit" value="Submit" />
</div>

<hr />

<div>
This is some text
<ul name="test" style="display: inline;">
<li>Click to expand</li>

<ul style="display: none;">
<li value="1">One</li>
<li value="2">Two</li>
</ul>

</ul>
<input type="submit" value="Submit" />
</div>

Notice how the regular old html input sits nicely inline with the text before it and the submit button after it?

Notice how the ul doesn't, despite the fact it's set to display inline? Anybody have any suggestions?

I have 4 or 5 form controls that I want in a horizontal line. Each form control has a label above it, and I'm using <br>s to position the form control below the label.

I thought that wrapping each "label<br>form control" with a <span> would turn the whole thing into an inline block, where the next <span> would line up next to it, like the next <td> in a <tr>.
Code:

<div id=secondline>
  <span id=ed>
    <b>Event Definition</b>:<br>
    <textarea name=inject cols=45 rows=6></textarea>
  </span>
  <span id=after>
    <b>After</b><br>
    <select name=next size=8 multiple>
      <option value=0>0
      ...
      <option value=100>100
    </select>
  </span>
</div>

but, alas, it doesn't work like that.

How can I get Code:

<tr>
  <td>label<br>form_control</td>
  <td>label<br>form_control</td>
</tr>

behavior without using tables?