CSS - Floating Boxes

I have 3 tables in a div. I have two of the tables one on top of the other. I wanted to place the third table to the left of the bottom table. So I placed the second table relative and left -50px. I placed the third with position absolute, top -70px and float right to achieve this layout. Is there a better way of doing this out of curiousity?

Hi,

Can someone help me with why the following header bar doesn't work in Firefox? It just shows the very top of the bar with the two other divs inside of it.

Code:

<div class="cmsHeader">
	<div style="float: left;">Page Name</div>
	<div style="float: right;"><a href="" title='Add Page'><img src='images/icons/file_(add)_16x16.gif' border='0' alt='Add Page'></a></div>
</div>


.cmsHeader{
	background: #809096;
	padding: 5px;
	width: 98%;
	color: #FFFFFF;
}

.cmsHeader a{
	color: #FFFFFF;
	text-decoration: none;
}
.cmsHeader a:hover{
	text-decoration: underline;
}

Hi Everyone,

I've been doing modest CSS for a while now and feel like I have a good grasp of it, and generally find a way of doing what I want. But, this has always bugged me and I need to understand what is going on...

I think it's a question of Floating.

This is in reference to http://www.arabellamusic.co.uk

I want the blog posts to be on the left, and some other content on the right. How is the best way to go about doing this? You can check my source, but this was my thinking:

Code:

HTML

<div class='inner'>
     <div class='left'>
     BLOG PHP HERE
     </div>

     <div class='right'>
     SOME OTHER STUFF HERE
     </div>
</div>

And the CSS:

.inner { width:788px; }
.left { float:left; width:50%; }
.right { float:left; width:50%; }

If you grab my stylesheet and my source, you will see that I have a couple more things in there, but I don't think they could be affecting the rest (text-align etc...)

So, am I doing this wrong? I have floated columns in other websites this way and it sometimes works, sometimes doesn't. Incidentally, once it would only work when I set 49% to each, I was assuming this was something to do with the box model I read about, but wasn't too sure.
I will try not to play around with the site too much until I get a reply or two, but a few things may jump around as I try stuff!

Thanks in advance...
James

hi,

i am a total newbie with css and trying to create a floating divider. an example can be seen at www.payjunction.com.
does anyone know a tutorial on how to create one?
thanks for the help in advance

I need to center a div which contains two columns. Its important that the div encapsulates the content within. This is what I've done so far:

CSS:
Code:

* {
  margin: 0;
  padding: 0;
}

#container {
  float: left;
  width: 960px;
  border: 1px solid #000000;
}

.left {
  float: left;
  width: 650px;
}

.right {
  float: left;
  width: 250px;
}

HTML:
Code:

<div id="container">
  <div class="left">
  left content goes here
  </div>
  <div class="right">
  right content goes here
  </div>
</div>

Question: Is it possible to center #container to the middle of the page? Using margin: 0 auto; doesnt work with floating divs. Its very important that #container has a border around .left and .right. Any help will be appreciated

Hello.

I spoke with some css developers yesterday on IRC but they failed to fix the problem. They suggested me to ask here for help so I will.

I am currently making a new homepage and this is my page; mg-s.org/newly/

I had to edit most of the .css because the page was "floating". Like, some people couldn't see everything and if we zoomed in or out then the page got messed up..

So here is the current progress: mg-s.org/newly/ which is messed up.

It's supposed to look like this:
pokit.org/get/?00e5090c7ab5a0972f325bb16608f6fb.jpg

But as you can see it's not.

Here is the style.css : pastebin.com/BPrfZuBd
Here is the index.php : pastebin.com/BDQKcxCE

I am not that familiar with css so I need help. I've already editing on the size in the .css like on "top" to fix the #panel so it goes futher up but it's not working. Same with the #rightmenu

I have a page with content on the left and a menu with "latest" news sitting directly under it. When the pages get longer, when you scroll down there is whitespace there. So I want the "latest news" section to follow the page, however, when I set the position to fixed the news overlaps the menu.. only to be made worse by the fact that I use jquery's accordion plug-in.

I'm a new member so I can't directly post a link..but
freezerburned dot org /tikigaq.com/old.php

I'm out of ideas.

Thanks for the help.

Hi again

could someone help me figure out why my left and right box's on thid design are not inline with the content (middle) box

thanks

see attached pic to see what i mean.


Code:

CSS CODE

body {
background:#ffffff;
color:#000000;
font:76% Verdana,Tahoma,Arial,sans-serif;
margin:0;
padding:0;
text-align:center;
}

/*** Main container ***/

#container {
background:#EAEAEA url() repeat-x;
color:#000000;
width:90%;
margin:5px;
min-width:770px;
padding:0;
}


/*** Content ***/

#content {
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
padding:15px 20px 5px;
height:500px;
margin:5px;
}

/*** Main Banner ***/

#Banner {
background-color:#EEEEEE;
height:55px;
border:1px solid #DEDEDE;
padding:15px 20px 5px;
margin:5px;
}

/*** Left Side Navigation ***/

#SideNav {
width:15%;
float:left;
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
min-width:200px;
padding:15px 20px 5px;
margin:3px;
}

/*** Right Side content ***/

#RightCon {
float:right;
width:15%;
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
padding:15px 20px 5px;
min-width:200px;
margin:3px;
}

Thanks

Hey All:

This is my first post to this forum. Any and all assistance is greatly appreciated!

I am having an issue with some floating div's. I'm sure it's as easy as moving the div to a different parent but, I'm having trouble figuring this one out.

My site is pretty simple. Most of the div's are floating left. I have one div that is floating right. I want the right div to stretch or contract to the full height of the content. Most of my content fits into a 740px height. There are a few that are more (up to 1500px). So, I want to put 1500px worth of images in the right column but only show as much as needed to fit the content area (most of the time only 740px). Right now, the full height of the right div is showing.

I would post a link but, I'm new to the forum and it isn't allowed. If there is a way around this, I am happy to provide a link.

Thanks in advance for any responses!

Jeff

I've got a really weird situation happening in IE7, and I can't figure out what I could possibly be doing wrong. I've got two divs on a page - one floating left, the other right. Each div contains two fieldsets, none of which are floated. This is the general setup:

HTML
Code:

<div id="colRight">
  <fieldset id="serviceArea">
    ...
  </fieldset>
  <fieldset id="defineArea">
    ...
  </fieldset>
</div>
<div id="colLeft">
  <fieldset id="profile">
    ...
  </fieldset>
  <fieldset id="profileBio">
    ...
  </fieldset>
</div>

CSS
Code:

#colLeft {
  float:left;
  margin-right:15px;
  }
#colRight {
  float:right;
  }
fieldset {
  padding:0 1em 1em 1em;
  margin-bottom:1em;
  }
fieldset#defineArea,
fieldset#serviceArea {
  float:none;
  width:230px;
  padding:0 10px 10px 10px;
  }

Everything lines up perfectly in IE8, FF3.6 and Chrome, but in IE7 (actually, IE8 in Compatibility Mode) #serviceArea floats to the left of #defineArea (or vice-versa) in #colRight, and #colLeft gets pushed down below the now-too-wide #colRight. Since fieldsets are block-level elements, how can they be floating, especially when I explicitly set them to float:none?

There's a stripped-down version of the page at http://www.weddingpastorsusa.org/design2/test_editform.html. Any help would be greatly appreciated.

Hi All

I seem to have an issue with floating an element in IE6&7. All other browsers (including IE8) are fine.

When using a right float element, IE7 seems to push the elements to the left of it below the right-floated element, instead of to the left where they are suppose to be.

Is there a work-a-round and/or hack for this?

Cheers!

Russ

http://jordanmeeter.com/new/links.php

If you view that page in Firefox, it displays how it is supposed to. But if you view the page in Internet Explorer, you can see that it is severely ****ed up!

Any suggestions?

Thanks,
Jordan

I have a DIV element in a menu system that pops up when you hover over the parent menu. Everything in the menu works fine, however I need to embeed the navigation including the menu into a frame where the menu sits flush with the bottom of the frame it's in and when you mouse over the parent element the DIV that pops up is hidden by the frame below it. Like so:

--- frame 1 ------
<content>
<menu>
--- frame 2 ------
<main content>
...
...
------------------

Is there anyway with CSS to tell the DIV to float above the bottom frame?

I'm Having problems getting my footer to stay below the content of my page.

here's the link to my page.
http://www.netgamegurus.com/

main page html

Code:

<body>
	
    <div class="container">
    
    	<div class="header">
        <?php include_once("pages/header.php"); ?>
        </div>
        
        <div class="main_body">
        <?php include_once("pages/index_body.php"); ?>
        </div>
	</div>
    	
    <div class="clearfooter">
   	</div>
    
  	<div class="footer">
   	<?php include_once("pages/footer.php"); ?>
   	</div>
    
</body>
</html>

main page CSS

Code:

body {
	background-color: #FFFFFF;
	text-align:center;
}

body,html {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    height: 100%;
    width: 100%;
}

a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:active {
	text-decoration: none;
}

.container {
	position:relative;
	padding:0px;
	margin:0px;
	margin-bottom: -150px;
	width:100%;
	height:100%;
	background-color:#666;
}

.header {

}

main_body {
	
}

.clearfooter {
	clear:both;
	height:150px;
}

.footer {
	position:relative;
	height:150px;
	margin: -150px auto 0 auto;
}

index_body html

Code:

<body>
	<div class="left_col">
    <?php include_once("left_col_index.php"); ?>
    </div>
    
    <div class="right_col">
    <?php include_once("right_col_index.php"); ?>
    </div>
    
</body>
</html>

index_body CSS

Code:

.left_col {
	position:absolute;
	padding:0px;
	margin:0px;
	top:175px;
	left:0px;
	width:150px;
	height:100%;
	background-color:#00F;
	
}

.right_col {
	position:absolute;
	padding:0px;
	margin:0px;
	top:175px;
	left:150px;
	width:857px;
	height:105%;
	background-color:#0C3
}

I've looked up a ton of info on this on google, but nothing seems to help.

Anybody got an idea on this?

I am at my wits end as I have tried and searched just about everywhere for some guidance.

I'm currently changing my site to an entirely tableless markup. On the following page, I have an image floated right of my <ul> which is wrapped by a div with a dotted border on the top, right and bottom. When I float my image right, the bottom edge of my image runs below the bottom border of the div. This only happens in FF and NOT IE.

Check out the following link:

My problem

Here is my xhtml markup:

Code:

<!-- Start Linear Template -->

    <div class="contain">

      <img src="/images/linearthumb.png" class="templatethumb" alt="Linear Template" />

	<p>
	
	    Linear Template

	</p>

	    <ul class="template">

		<li><span class="rarr">&rarr;</span> Professional and sophisticated.</li>
		<li><span class="rarr">&rarr;</span> Drop-down navigation menu.</li>
		<li><span class="rarr">&rarr;</span> Information &ldquo;boxed&rdquo; for easy reading.</li>
		<li><span class="rarr">&rarr;</span> Background can be &ldquo;watermarked&rdquo; with <br />
		    your logo or any color you wish.</li>

	    </ul>

    </div>

<!-- End Linear Template -->

And here is my css for the div and image (forgive the roughness of it):
Code:

div.contain {
    padding-right: 5px;
    margin-bottom: 10px;
    border-top: 2px white dotted;
    border-right: 2px white dotted;
    border-bottom: 2px white dotted;
}

img.templatethumb {
    float: right;
    width: 168px;
    height: 160px;
    border: 2px outset #808080;
    margin-top: 5px;
    margin-right: 100px;
}