CSS - Floating Align Help

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

Learning CSS and trying to emulate the following table:
Code:

|--------------------------------------|
| Text 1           |----------------|  |
| Text 2           |  Inner box text|  |
| Text 3           |----------------|  |
|--------------------------------------|

I can get a nested div to work vertically but not horizontally. I'm trying:

Code:

        div#container { float: left }
        div#title { float: right }
	<div id="container">
	        hello<br>hello
		<div id="title">
			Text 1<br />
                        Text 2
		</div>
	</div>

Which is producing:
Code:

|--------------------------------------|
| Hello                                |
| Hello                                |
|                  |----------------|  |
|                  |  Text 1        |  |
|                  |  Text 2        |  |
|                  |----------------|  |
|--------------------------------------|

Perhaps a positioning thing which I don't understand yet? It's not homework so you don't have to do it for me, but rather you could just point to knowledge sources.... Tx!

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,

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 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..

I have a problem with ie rendering floaring dd's. What happens is the dd stay next to each other even if i had cleared it. It works fine in FF. Can anyone share some light?

... here is the code...

Code:

<dl>
                                <dt>Email:</dt>
                                <dd><input type="text" /></dd>
                                
                                <dt>State:</dt>
                                <dd>
                                    <select>
                                        <option>option1</option>
                                        <option>option2</option>
                                        <option>option3</option>
                                    </select>
                                </dd>
                                
                                <dt>Year of Birth:</dt>
                                <dd>
                                    <select>
                                        <option>option1</option>
                                        <option>option2</option>
                                        <option>option3</option>
                                    </select>
                                </dd>
                            </dl>

and the css:

Code:

dl{
}

dl dt{
	clear:both;
	width:80px;
	text-align:right;
	margin:10px 0;
}
dl dd{
	margin:8px 0 0 5px;
}

dl dt,dl dd{
	float:left;
}

thank you in advance

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.

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?

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 use form field hints on my sign up page. I am trying to float it to right with the codes below but its not happening.


.hint {
float:right;
display: none;
position:absolute;
width: 150px;
border: 1px solid #aaaaaa;
background: #d7d7d7;
}
www.pearl.ru/isdunyasi/signup.asp

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?

Hey,

I've got a little issue with my new wordpress template. I can't set my right column to height: 100%.

This is how the template looks like

Code:

<div id='maincontainer'>
<div id='sidebar'>
<div id='mainpage'>

With following position css:

Code:

#maincontainer {
  position: relative; 
}

#sidebar {
  float: right;
}

Now I need that sidebar column to go all the way down, i thought of setting height: 100% and setting it to maincontainer also as sidebar is relative to maincontainer.

What works is setting a height in pixels but this is not what I want as it makes small pages very long.

Has anybody experienced a similar problem or is able to shed some light on the issue. I've been looking at it for some while and it's beginning to annoy me



greets,

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

Hi im experiencing big problems with creating this layout. I spent whole day with positiooning this divs but i cant do this final layout. Everytime i want to float divs to left DIV 1 and DIV 2 are ok but DIV 3 jump to new line under DIV 2 and dont fit the gap between DIV 3 and div 1 . Can someone please help me ? Thanks ...

link to image : xipic.eu/ufiles/njf25uy8_divs.png

Hello,

can anyone help me with this? I'm having trouble floating some divs and I can't find the problem.

1. navigation should be aligned with the bottom of the h1 logo
2. the content div should come next to the list of brands. The content div should overlap the black bg at the top.

www. claeysconsult . be / misskado / index2.html

Thanks in advance...