Div Nature: Css Help

[Craige]

I know it's something I'm just not thinking of, but either way, it's a problem.

I'm doing up a site layout at work right now, and I can't get divs to sit beside one and other. I can't float them, because the height of their container div depends on their hight, set by content within it, but even if I did, it doesn't work properly.

So, how would I bypass the Div's nature to take a whole line, even if their width is set to less then the line length, so I can have multiple div's per width.

Here's a Screen shot of what I'm talking about:
Screen-Shot

[elbekko]

Try setting them to display: inline?

And you can always use a 'clearer' div to bypass the floating problem :)

[Craige]

At 12/4/06 02:58 PM, elbekko wrote: Try setting them to display: inline?

No, that didn't work.

And you can always use a 'clearer' div to bypass the floating problem :)

?

[elbekko]

<div>
<div style="float: left">Yay, left</div
<div style="clear: both; height: 0px;"></div>
</div

The bottom div is the clearer div. It'll force the outer div to resize with the floating ones inside.

[Craige]

At 12/4/06 03:06 PM, elbekko wrote: <div>
<div style="float: left">Yay, left</div
<div style="clear: both; height: 0px;"></div>
</div

The bottom div is the clearer div. It'll force the outer div to resize with the floating ones inside.

Okay, but floating doesn't "want" to work. The container just moves up underneith(/over) the floated div, and the content pushed aside.

[Bizarro]

floating the divs like elbekko said and then having a clearing element will fix your problem but here is a cute little trick that makes clearing your floats much neater add this to your css
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
and any element containing floated elements that need to be cleared add class="clearfix" and you don't need messy extra clearing elements
the css basically generates and invisible period that clears your floats there are some issues with some occurrences in IE but I don't think you will have that problem as long as you set a dimension for the floated elements

[Craige]

At 12/4/06 03:20 PM, Bizarro wrote: floating the divs like elbekko said and then having a clearing element will fix your problem but here is a cute little trick that makes clearing your floats much neater add this to your css
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
and any element containing floated elements that need to be cleared add class="clearfix" and you don't need messy extra clearing elements
the css basically generates and invisible period that clears your floats there are some issues with some occurrences in IE but I don't think you will have that problem as long as you set a dimension for the floated elements

I'll keep that sniplet around for later (it won't work now for the reason I am about to state) However, as for the here and now:

As I said, my div's wont float properly. They end up overlaping for some strange reason. I've never seen it before.

[Bizarro]

At 12/4/06 03:29 PM, Craige wrote: I'll keep that sniplet around for later (it won't work now for the reason I am about to state) However, as for the here and now:

As I said, my div's wont float properly. They end up overlaping for some strange reason. I've never seen it before.

some form of code would be very helpful :)

[Craige]

At 12/4/06 03:31 PM, Bizarro wrote: some form of code would be very helpful :)

Usually is :)

http://craige.pastebin.ca/267364

http://craige.pastebin.ca/267370

[elbekko]

First of all, check for typos ;)

marign:5%;

margin:5%;

And a clearer div would definately fix this :P I'm sure of that.

[elbekko]

To be even more precise (the code and CSS are in one place here):
http://craige.pastebin.ca/267390

I tested it and it works :P

[Bizarro]

#All
{
marign:5%;
padding:5% 5% 0% 5%;
background-color:#4f4f4f;
}

#Top
{
float:left;
width:225px;
height:275px;
border:1px #ffffff solid;
}

#Nav
{
width:225px;
height:275px;
float:left;
clear:left;
border:1px #ffffff solid;
}

#Main
{
top:5%;
padding:5%;
float:right;
width:100%;
clear:left;
background-color:#bfbfbf;
border:1px #ffffff solid;
}

#Bottom
{
clear:both;
margin:0% 5% 5% 5%;
padding:0% 5% 0% 5%;
height:20px;
background-color:#4f4f4f;
border: 1px #ffffff solid;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
take it for a spin, the everything div hangs off the page cuz I didnt know what width you wanted it turns out you need the ugly IE hack for the clearfix, but no big deal

p.s. add class="clearfix" to your "all" div

[Craige]

At 12/4/06 03:45 PM, elbekko wrote: First of all, check for typos ;)

marign:5%;

margin:5%;

And a clearer div would definately fix this :P I'm sure of that.

And how would you suggest I define it further?

[elbekko]

Lol, 3 posts in teh same minute.

Anyway, the solution is in here :P

[Craige]

Not to be a downer, but neither of those worked.

(if anybody is going to take another stab at it, I should say that I require a 5% border between the content, and the left nav/top)

[Bizarro]

At 12/4/06 04:02 PM, Craige wrote: Not to be a downer, but neither of those worked.

(if anybody is going to take another stab at it, I should say that I require a 5% border between the content, and the left nav/top)

I was so eager to eat some food I forgot to check in FF, anyway whats up with the, what seems like random, 5% margins. Why not just have a definite margin, unless you plan on making the whole page dynamic

[elbekko]

http://pastebin.ca/267416

That works exactly like you want it to, with the spacing and all.
Evidence: http://img102.imageshack.us/img102/2235/craig err6.png

That's what it looks like in FF2 on 1600x1200

[Craige]

At 12/4/06 04:12 PM, Bizarro wrote: I was so eager to eat some food I forgot to check in FF, anyway whats up with the, what seems like random, 5% margins. Why not just have a definite margin, unless you plan on making the whole page dynamic

The whole page is supposed to be dynamic width, and my boss wants the margin to increase with screen resolution, so things don't look so tight together.

At 12/4/06 04:18 PM, elbekko wrote: http://pastebin.ca/267416

That works exactly like you want it to, with the spacing and all.
Evidence: http://img102.imageshack.us/img102/2235/craig err6.png

That's what it looks like in FF2 on 1600x1200

Sorry, that's just bad explaining on by behalf. The content is supposed to go beside the top and nav bars (with no space between top and nav btw). And I think when I tried it, the container div didn't expand.

Anyway, I have instructions to try and set the content div to a percent width instead, and set the margins to 40px. His only concern was the lines getting too long, and making the margins look small, so with a percent content width, that won't happen as much, and it saves the trouble of all this. Not sure how it's going to look though.

[elbekko]

Well, I think if you put the top in the MainWrapper div, it'll be fine :P

Oh well, good luck with it.

[Craige]

At 12/4/06 04:37 PM, elbekko wrote: Well, I think if you put the top in the MainWrapper div, it'll be fine :P

It is....?

Oh well, good luck with it.

Thanks. Things keep changing. The percent width didn't work because I didn't know how to set the outside wraper to bind to the smallest possible size (I thought width: auto; would work, but it didn't), so now he wants me to look at some JS to use to create lo, med, and high resolution classes for the css.

[Bizarro]

At 12/4/06 04:42 PM, Craige wrote: so now he wants me to look at some JS to use to create lo, med, and high resolution classes for the css.

Oh god no. It seems I've read this just in time. Hold off on doing that while I finish up what I think is exactly what you want.
Them 2 boxes on the left, with a 40px margin and then the main content to the direct right of them with a fluid width correct?

[Bizarro]

http://pastebin.ca/267513

There's the code, its not exactly your site, just a template I just made really, but it's similar to what you had. You should have little to no trouble figuring out what everything is

[Jessii]

When you use floats w/inline, you have to set the margins on the divs so that it goes to the right spot.

[PONGpaddle]

http://craige.pastebin.ca/267682

Tested in Firefox and IE7.

[Craige]

;)

I'll try the code tomorrow when I'm back at work. I'm doing homework right now so I can't try it here.

Hope it works, because I would really prefer not to use JS for this.

[Craige]

Well, Pon's was just what I had origonally, and I didn't feel like completly using Bizarro's.

I did base a new one off of Bizarro's though, and it works more or less. I couldn't do the 5% margin on the left of the content, but oh well; 40px will do I'm sure. Allot of this stuff started to really hit me today when I was coding, as well as after hearing what you guys had to say. I guess I need to get away from the computer and think about a problem more before I get fusterated with it.

Anyway, here's the source if you're interested:

http://craige.pastebin.ca/268487

[Craige]

At 12/5/06 02:46 PM, Craige wrote: Well, Pon's was just what I had origonally, and I didn't feel like completly using Bizarro's.

I did base a new one off of Bizarro's though, and it works more or less. I couldn't do the 5% margin on the left of the content, but oh well; 40px will do I'm sure. Allot of this stuff started to really hit me today when I was coding, as well as after hearing what you guys had to say. I guess I need to get away from the computer and think about a problem more before I get fusterated with it.

Anyway, here's the source if you're interested:

http://craige.pastebin.ca/268487

Ahhh........

I forgot my Doc type, and with it, the page screws up. The page content jumps down below the left bar again.

[elbekko]

Err, Craige, change
<div id="left">
to
<div id="Left">

and it works :P

[Craige]

At 12/5/06 02:56 PM, elbekko wrote: Err, Craige, change
<div id="left">
to
<div id="Left">

and it works :P

Ah, thank you. It appears that doing the same stuff over and over for months has really started to get to me.