CSS - New Div Format Switchover (used Tables Last Night): Float Problems...

Hey.

On my page I've got smaller "post" div's I put my content in, and those are inside a "mainContent" div again. They have fixed width and I can get two of them beside each other, which works fine with float:left - but if I have two posts with variable height, then the next post on the page will be below the highest one. I uploaded an example at http://www.zaklaberg.tk. I was wondering how I can make it so my post elements stack properly on top of each other?

My css-rule for the post div tags looks like this:

Code:

.post {
	padding: 5px;
	height: auto;
	width: 330px;
	margin-bottom: 50px;
	margin-left: 30px;
	background-color: #CCE3C1;
	float: left;
}

The rest of my css is at http://home.online.no/~ste-labe/_css/main.css.

Thanks in advance for any help!

Here's the link of the messy page:
http://205.205.200.231/~h806209/indexmess.php

I need someone to tell me why the float left/right isn't aligning properly. I posted the link above.
Here's an example that works:
http://205.205.200.231/~h806209/positioning.php
and
http://205.205.200.231/~h806209/positioning1.php

One's in a style tags the other's inline.

But when I insert my codes it shows things messed up.

Hello everyone!!

Great community you have going here!

I am working on a personal project, and try to do all the work myself
(hired a designer at one point but the best he could do is a table based layout )

The site is based on the drupal CMS and the zen theme.
And currently the them has problems when rendered in IE7

everything is getting jammed in the top left corner in IE7 and IE8 compat mode:
drupal.org/files/issues/IE8_compat.GIF

some people tried to combat this issue
by adding this to the IE specific stylesheet:

CSS Code:
Original - CSS Code #header, #main {overflow: hidden;}

  

 #header,


 #main {overflow: hidden;} 

but it does not solve the problem 100%
drupal.org/files/issues/IE7vsIE8_overflow_hidden.GIF

I've been searching for a fix for some time but with no luck, so if you people have any suggestions I would be super appreciative!

The live site could be viewed he
techbine.nfshost.com

P.S. to see the images copy/paste the links to the address bar
(I have a low post count so can't link directly )

hey all, i have divs within a div but the inner div with the text does not expand the main wrapping div with so the main wrapping div is very thin and the text just goes over it?? here is the code

Code:

<div id="greyinset">
	<div id="insetcontent">
		<form name="form1" method="post" action="">
			<div id="insetcontentL">
				<div align="left">
				    <label>Smoking:</label>
				    <br>
				    <label>Bed Type:</label>
				    <br>
				    <label>Accessible:</label>
				    <br>
			      </div>
			</div>
			<div id="insetcontentR">
				<div align="left">
				  <input name="smoking" type="radio" value="yes">	
				  yes
				  <input name="smoking" type="radio" value="no" checked>	
				  no<br>
				  <input name="radiobutton" type="radio" value="radiobutton">	
				  King 
				  <input name="radiobutton" type="radio" value="radiobutton">	
				  Two Beds 
				  <input name="radiobutton" type="radio" value="radiobutton">	
				  No Preference<br>			 
				  <input name="accessible" type="checkbox" id="accessible" value="yes">
			    </div>
			</div>
		</form>
	</div>
</div>

and the css code
Code:

#greyinset { width: 100%; background-color: #eee; border: 1px solid black; clear:left; }
#insetcontent {width: 100%; padding: 3px 10px 3px 10px; white-space:normal;}
#insetcontentL {width: 50%; float: left;}
#insetcontentR {width: 50%; float: right;}

any ideas?? or do i have to go back to trusty tables

thanks

RF

Hello.
I am trying to solve a float problem. The crux:

One wrapper div around a left (floated) column and right column.

Content in the left is fine:

In the right column I need the image (#logo) to be on the left of a h2 (#name).

The #logo is taller than #name.

Under both of those I need a ul (#basic_list) to essentially clear both #logo and #name.

Please look at my code and diagram of how it should look in my attachment.

Thanks

Thanks for viewing my post. Here is the site I am working with:

http://www.flattrackillustrated.com/dev/

I am having two problems:

1) If you shrink your browser too far in on the left, the floating right image goes over everything. I need to MAX left side margin to be about 600px, but with float on, the margin-left doesn't work! Is there a way to tell this image to float, but stop at a certain point?

2) I want the background image I have on the left nav side to continue all the way to the bottom of the page, however, since I already am using a background image for the top, I can't seem to do a horizontal and vertical of two different images. Is there a way to make this happen?

Thanks!

Hey.

First post on here, so hopefully you lot are very helpful

I've been asked to make a site for someone I know, and I've done the design, made most of it in CSS and a little php for navigation alerations.

The URL for the website is: (URL address blocked: See forum rules)

The problem that I'm seeming to have, is that in IE7 the footer only takes the value of the #bottom_container height, and ignores the #left and #right that are inside this container.

Meaning that, the footer rides up to the middle of the page, as shown:

[IMG](URL address blocked: See forum rules)[/IMG]

Does anyone know how to solve this? It's performing well in Safari and Firefox, and even IE6! Just not the new one. I know it's something to do with the height of the botom container, but each page is going to have different amounts of content, so I cant set a height for all of them.

Thanks very much!

Nick.

Hey guys,
I started working on my website again and found a great CSS dropdown menu online that is free to use with a GPL license.

I adjusted it without a problem (always could read and adjust code but aren't great when it comes to writing it).

Now that I embedded it in my website there is a slight trouble I am running into. I can't seem to center it no matter what I try.

I read these floats are tricky to center at times which is why I wanted to share my code with you and see if you might be able to fix it for me.

If anyone of you can help me out it would be much appreciated!!!

Thanks,
alex

Here is the site with the code.

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>
<title>LWIS.NET Celebrity Drop-Down Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Tom@Lwis (http://www.lwis.net/free-css-drop-down-menu/)" />
<meta name="keywords" content=" css, dropdowns, dropdown menu, drop-down, menu, navigation, nav, horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards, cross browser, internet explorer, ie, firefox, safari, opera, browser, lwis" />
<meta name="description" content="Clean, standards-friendly, modular framework for dropdown menus" />
<link href="css/dropdown/themes/lwis.celebrity/helper.css" media="screen" rel="stylesheet" type="text/css" />

<!-- Beginning of compulsory code below -->

<link href="css/dropdown/dropdown.linear.columnar.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/dropdown/themes/lwis.celebrity/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />

<!--[if lte IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

<!-- / END -->

</head>
<body>

<!-- Beginning of compulsory code below -->

<ul id="nav" class="dropdown dropdown-linear dropdown-columnar">
	<li><a href="./">resume</a></li>
	<li><a href="./">about</a></li>
	<li class="dir">work
		<ul>
			<li class="dir">Reel
				<ul>
					<li><a href="./">Montage Reel</a></li>
					<li><a href="./">Director's Reel <br>(selected scenes)</a></li>
					
				</ul>
			</li>
			<li class="dir">Narrative
				<ul>
					<li><a href="./">The Liberation of the Fish</a></li>
					<li><a href="./">Behind the Scene</a></li>
					<li><a href="./">All that Remains</a></li>
					<li><a href="./">Jumper</a></li>
					<li><a href="./">Dragoste</a></li>
				
				</ul>
			</li>
			<li class="dir">Music Video
				<ul>
					<li><a href="./">MOBY music video competition</a></li>
					
				</ul>
			</li>
			
			<li class="dir">Commercial
				<ul>
					
					<li><a href="./">FIFA spec commercial</a></li>
					
				</ul>
			</li>
			
		</ul>
	</li>

</ul>

<!-- / END -->

</body>
</html>

And here is the default css which I have tried playing with to no success.

Code:

@charset "UTF-8";

/** 
 * LWIS Celebrity CSS Drop-Down Menu Theme
 *
 * @file		default.css
 * @name		Default
 * @version		0.1
 * @type		transitional
 * @browsers	Windows: IE5+, Opera9+, Firefox2+
 *				Mac OS: Safari2+, Firefox2+
 *
 * @link		http://www.lwis.net/
 * @copyright	2009 Live Web Institute. All Rights Reserved.
 *
 */


/*-------------------------------------------------/
 * @section		Base Drop-Down Styling
 */


ul.dropdown {
 font: 20px/normal Helvetica, Arial, sans-serif;
 letter-spacing: +2px;
 text-transform: lowercaseercase;
}

	ul.dropdown li {
	 padding: 0 10px;
	 background-color: transparent;
	 color: #000;
	}

	ul.dropdown li.last ul li {
	 float: right;
	}

	ul.dropdown li.hover,
	ul.dropdown li:hover {
	 background-color: #cdcdcd;
	 color: #000;
	}

	ul.dropdown a:link,
	ul.dropdown a:visited	{ color: #000; text-decoration: none; }
	ul.dropdown a:hover		{ color: #000; }
	ul.dropdown a:active	{ color: #ffa500; }


	/* -- level mark -- */

	ul.dropdown ul {
	 background-color: #cdcdcd;
	 font-size: 12px;
    	 letter-spacing: normal;
	}

	* html ul.dropdown ul {
	 width: 960px;
	}

		ul.dropdown ul li {
		 font-weight: bold;
		}

		/* -- level mark -- */

		ul.dropdown ul ul {
		 margin-top: 5px;
		 text-transform: none;
		}

			ul.dropdown ul ul li {
			 font-weight: normal;
			}


/*-------------------------------------------------/
 * @section		Support Class `dir`
 */


ul.dropdown *.dir {
 padding-right: 30px;
 background-image: url(../../../../images/lwis.celebrity/nav-arrow-down.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

ul.dropdown ul *.dir {
 background-image: none;
}

I have an image that is float: right that I want a caption under.

I read the Floatutorial and another float tuturial and thought I did what it said, but now the image floats left of the caption - sort of.

I want the image to float left and the caption in dk blue to be beneath it.

Here is the problem page

Here is the css code for the float part: Code:

.imgRight {
	clear: none;
	float: right;
	min-width: 100px;
	color: #3399FF;
	font-weight: bold;
}

.imgRight img {
	margin: 0px 0px 10px 20px;
	border: 1px solid #000099;
	overflow: visible;
}

Here is the xhtml code for the float part: Code:

<p>Vitalograph Ltd was founded in 1963, building on a successful business in respiratory 
			diagnostic and therapeutic products started in 1951. </p>
						
      <div class="imgRight"><img src="../images/p_model.jpg" width="275" height="182" alt="Vitalograph P Model Spirometer" />
	  1966 Vitalograph P Model Spirometer</div>
	  
      <p>Vitalograph achieved its early success 
			by taking spirometry from a complex laboratory test to a simple effective screening procedure 
			- with the key benefit of providing early detection, and therefore more effective treatment.</p>

Here is the industry news page

I have the picture floating either right or left with text beside it - then a line underneath it. I want the line to always be at least 10px below the picture. When the text is less, the line crosses into the picture.

xhtml: Code:

	  
	  <div id="industry"> 
	  
	  <h1>Industry News and Information</h1>
	         
	    <div class="row">
		<span class="imgLeft"><img src="../images/ATS-ERS_thumb.jpg" width="100" height="100" alt="ERS ATS Logo" /></span> 
        <h2>New single set of standards for ERS and ATS</h2>
          <p>Through the combined efforts of the European Respiratory Society (ERS) 
          and the American Thoracic Society (ATS), there is now a new single set 
          of standards for both sides of the Atlantic. <a href="/resources/industry_news/news_ers_ats.html">More 
          ...</a></p>
		  
		  </div>
		
		<div class="row"> <span class="imgRight"><img src="../images/ARTP_thumb.jpg" width="112" height="100" alt="COPD Day at Vitalograph" /></span> 
          <h2>Winter ARTP meeting well attended</h2>
		  <p>Vitalograph recently attended the Association for Respiratory Technology 
            and Physiology (ARTP) 3Oth Annual Conference at the Hilton Metropole 
            Hotel in Brighton. <a href="/resources/industry_news/news_artp.html">More 
            ...</a></p>
			
		  </div>
		  
		  <div class="row">
		  <span class="imgLeft"><img src="../images/ATS-ERS_thumb.jpg" width="100" height="100" alt="ERS ATS Logo" /></span> 
        <h2>New single set of standards for ERS and ATS</h2>
          <p>Through the combined efforts of the European Respiratory Society (ERS) 
          and the American Thoracic Society (ATS), there is now a new single set 
          of standards for both sides of the Atlantic. <a href="/resources/industry_news/news_ers_ats.html">More 
          ...</a></p>
		  </div>
		
        <div class="rowLast">
		<span class="imgRight"><img src="../images/COPDdayoffice_thumb.jpg" width="99" height="98" alt="COPD Day at Vitalograph" /></span> 
        <h2>Vitalograph participates World COPD Day</h2>
		  <p>To mark World COPD Day on 16 November 2005, the British Lung Foundation 
          teamed up with Superdrug to offer a free spirometry test at selected 
          stores across the UK. <a href="/resources/industry_news/news_world_copd_day.html">More 
          ...</a></p>
		  </div>		

       <p class="back"><a href="javascript:history.go(-1)">< Back</a></p>
		  
      </div>

css: Code:

.imgLeft img {
	clear: none;
	float: left;
	margin: 0px 20px 10px 0px;
	border: 1px solid #000099;
}

.imgRight img {
	clear: none;
	float: right;
	margin: 0px 10px 10px 20px;
	border: 1px solid #000099;
}

/*rows*/

.row {
	padding-top: 10px;
	margin-top: 10px;
	border-top: 1px solid #3399FF;
}

.rowLast {
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: 1px solid #3399FF;
	border-bottom: 1px solid #3399FF;

}

.line {
	border-bottom: 1px solid #3399FF;
	padding-top: 0px;
	padding-bottom: 10px;
}

.inline {
	display: inline;
}



#mainColumn {
	padding: 0px;
	margin-left: 175px;
	background-color: #FFFFFF;
	height: 100%;
}

/*industry news*/

#industry {
	padding-right: 20px;
	padding-left: 20px;
}

#industry h1 {
	margin-bottom: 20px;
}

#industry h2 {
	color: #000099;
	margin: 0px 0px 10px 0px;
}

#industry img {
	margin-bottom: 10px;
}
	
.copdDay img {
	clear: both;
	margin: 0px 40px 15px 55px;
	border: 1px solid #000099;
}

.artp {
	margin: 0px 40px 15px 40px;
}

.artp img {
	clear: both;
	margin: 0px 40px 15px 25px;
	border: 1px solid #000099;
}

Any suggestions on how to get this consistently since through css accounting for varying lengths of text?? I know I can adjust padding/margins for each section to make it work, but I want something that is more universal that I can always use to get the same appearance.


Thanks!

http://wrath.wr.funpic.org

Hello Devshed. I am new here and am here looking for help. Maybe I'm just tired and dumb right now to figure it out. Anyways if you would take a look at the site I pointed out you'll notice the bottom border is missing. Why?

When I removed the float:left; on the lis it is fine but when it's in there it's all screwed up.

Second thing... if you'll notice my hovers do not work in IE. Is there an alternate way for me to get them to work in IE.

Thanks a lot.

Here is the relevant HTML code:

<table>
<tr>
<td>
<div style="float:left;">
<div class="middle"><div class="r"><div class="l">
<a id="gridtitle" href="javascript:void(0)" onclick="reload()"></a>
</div></div></div>

<div style="width: 200px;">
<a href="#" onclick="addheader()"><img border="0" src="tab_new_header.png" alt="Delete this grid"/></a> <a href="#" onclick="addfooter()"><img border="0" srctab_new_footer.png" alt="Delete this grid"/></a>
</div>
</div>

<div style="float:right;">
<a href="#" onclick="javascript:toggleLayer('newgrid');"><img border="0" src="button_add.png" alt="Add a grid"/></a>
<a href="#" onclick="deleteGrid()"><img border="0" src="button_delete.png" alt="Delete this grid"/></a>
</div>
</td>
</tr>
<tr>
<td>
<div id="gridbox3" class="gridbox" width="870px" height="600px" style="background-color:white;"></div>
</td>
</tr>
</table>


And the relevant CSS code [which just sets the background of the tab]:

.l {background: url(../../datadir/client/images/billinggrid/name_sidebg1.png) 0 0 no-repeat; height: 43px;}
.r {background: url(../../datadir/client/images/billinggrid/name_sidebg2.png) 100% 0 no-repeat; height: 43px;}
.middle {background: url(../../datadir/client/images/billinggrid/name_sidebg.png); height: 43px;}


This is the output (i can't post images?)
http://i34 [.] tinypic [.] com/4hpqag [.] png


The first problem I am having is that the div my gridtitle (CIBC) is in does not set its width automatically to the text width. Instaed, it spans the whole table ...

Position-wise, I would like the tab with "CIBC" to be to the far left, the header and footer tabs to be right of "CIBC" but still floating left, and the + and x signs to be floating right, all on the same line.

Help? Thanks in advance.

The underline is on the contact page (the google map has been freaking out on IE, so try FF). I want "Hours" to be underlined, but it isn't showing up.

It's an h1 with a class of "comment" and the CSS is Code:

h1.comment {
text-decoration: underline; 
}

The float problem uses this CSS. The page in question shows all the previous presidents .

There's a 0 margin and it does float, it just is aligned wrong. The CSS for both columns is Code:

#pastpres table {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .8em;
border-collapse: collapse;
margin-bottom: 1em;
margin-right: 0;
}

#pastpres tr {
border-bottom: 1px solid #775b36;
}

#pastpres2 table {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .8em;
border-collapse: collapse;
margin-bottom: 1em;
float: right;
margin-top: 0;
margin-left:0;
}

#pastpres2 tr {
border-bottom: 1px solid #775b36;
}

Hi,

I have been a CSS/XHTML developer for about 6 months now and I just came accross a problem that I have had difficulty solving... I have spent about a week on this problem, and still no luck... I kind of restarted too with no luck... I am thinking this may be a bug... But it works fine in IE...

In firefox, the content division background does not continue, instead a footer background is moved up... This is so weird, I dont know how this can be possible... This has been extremely frustrating... If anyone can help, that would be great! Thanks a lot!