Here is my basic website design:
Within content there are 3 main partitions. (logo, slogan, sites) And my Sites Partition requires 3 sub partitions (site1, site2, site3)
My current problem is that I don’t know how to put sites next to the Slogan Partition.
Here is my slogan partition code:
.slogan
{
margin-top: 150px;
padding: 0 0 100px;
}
Not sure the code required for me to place the Sites Partition next to the Slogan Partition.
The basic approach is to create a div for each, give each a width, and float them. You can either set each to float: left, or perhaps float one left and the other right.
With using the “float” command I can now place Slogan and Sites Partition beside each other. (float: left; for Slogan Partition, and float: right; for Sites Partition.)
Problem: Content Partition (which includes: logo, slogan, sites) does not include Slogan and Sites Partition.
I’m not sure why Content Partition is not including all 3 partitions… What is the error here?
If the Content partition is a static block (a regular, non-positioned block element like a div), and it has floated children inside it (it does now, you’ve floated them), then Content can’t see that it has children anymore. It thinks it’s empty, and so does not enclose it’s children anymore.
This is normal, and what happens with floated children inside static boxes.
There are lots and lots of solutions to this. I’ll give you the two I think would be safest for you, then maybe I’ll list some more so you know all later possibilities.
The Quick Dirty Easy way is to set the Content partition to “overflow: hidden”. By default, a static parent box is set to overflow: visible, and so long as its children aren’t floated or anything weird, the rules say that parent must “see” its children and enclose them.
When you tell the box “overflow: something-other-than-visible” (there is also “scroll” and “auto” values, but these will probably look ugly to you), now the parent box MUST consider if anyone is “overflowing” outside of it. Since we set it to hidden (or whatever), it must now be able to “see” those floated children; otherwise, how could it deal with overflow?
Because the parent can now “see” those floated children, it will enclose them like it should. Throw an ugly background colour or outline around Content/Parent and you’ll see it.
Overflow: hidden however does… hide overflow. If you have set dimensions on the Content/Parent like height or width, and any child inside needs to be bigger, then you’ll see them get cut off. Usually setting a width is ok because you’ve also set widths on your floated children and you calculated it all out and everyone inside carefully fits inside the parent, so no overflow. But if you have set a height on the parent, remove it. Let the children inside determine the height automatically. So now no cutoff.
Option 2: What if you really did want something to stick out of Content/Parent? Maybe an image that’s absolutely positioned, or some abso-po’d popup box shows up when users click on something and it might need to stick out from the Content/Parent box. Then overflow: hidden will bite you and you’ll need another solution.
A popular one is a modified version of Tony Aslett’s “clearfix”. Unfortunately lots of nasty hacky codes are out there under this name (the original was long because it dealt with IE5 for Mac and whatnot, but it was also brilliant). I’ll give you a clean one.
You take the Content/Parent, and give it a “fake” child who’s not floated. Since it’s not a float, it counts as a child who must be “seen” by the parent, and so the parent will enclose this one. But the fake child must be “under” the floats, so it has to clear them (you know float clearing? if not, read up on it, you’ll need to understand it well to use floats). When we create this fake child, it’s an inline element by default and inlines can’t clear stuff, so we’ll have to make it a block element. We’re using the :after pseudo element.
Let’s call Content #parent.
Your original parent code:
#parent {
all your styles;
}
#parent:after {
content: " "; /* an empty space. You have to have something as content. Some browsers are okay with a totally empty string but not all, so a space will do it. You can also use nonbreaking (content: "\\0a";) if you want to see it easier*/
display: block; /*only block elements can clear*/
clear: both; /*you have floats in both directions, but also this is often safer than clearing one direction anyway*/
height: 0; /*there are many variations on this, but this one has worked for me cross-browser: don't let this little bit of content actually show up or take any room on the page*/
}
This will work on most browsers, excluding the ones who don’t know these pseudo elements. Which are IE6 and IE7.
Are you supporting IE 6 or 7?
If you are supporting those, then you’ll also trigger HasLayout property on the Parent (Haslayout is not on non-compat-mode IE8).
If you had set a width on #parent already then your job is done!
But if you didn’t, setting a dimension like width will do the trick. If your parent was naturally 100% width of the page and you didn’t add any stuff to the sides like side padding, side margins or side borders, then you could safely get away with adding
width: 100%;
just for IE6 and 7, but without hacks and out in the open since it can be safe (almost redundant) for all other browsers.
If setting a width isn’t an option, you could use one of the old IE6 hacks for feeding info just to that. However you’re likely not supporting that one. If you are supporting IE7 though and not 6, it’s easier: there are more ways to trigger Haslayout.
Setting a min-height or min-width (I like min-height) will trigger haslayout in IE7. It just so happens that setting overflow to something other than “visible” does it too, which is why overflow: hidden works in IE7 (not because parents must see overflowing children, but because HasLayout demands it. IE is silly).
Some other options:
Float Absolutely Everyone!
If the #parent were floated, it would already naturally contain any floated children. Floats always enclose floats, all day every day. But if you were hoping to center #parent with auto-margins then you’re So Outta Luck. Plus, now someone might need to enclose the #parent! It could turn into an infinite stack of turtles all the way down and cause misery and hair loss. But it’s an option.
Display: Table!
Tables are static blocks, but specifically a table’s display state is display: table, not display: block. Meaning, different rules! Yay. One of these rules is, tables must always contain their children. So you could possibly maybe if you wanted to, set #parent to display: table.
However tables suck in so many ways, the most obvious one (for me personally) is this nasty old Netscape bug the Mozillians have decided is some kind of feature, a very special one that no other freaking browsers have, where you can’t position: relative someone in the table (or the table itself) and then absolutely-position a child relative to that.
Bleh. Tables also do weird things when sizing themselves blah blah. But, you know, the option’s there. Bonus points if you’ve ever done real table-based layouts in the past, cause then you’re already aware of table behaviour.
Clearing div!
This one causes global warming but also warms the heart of every CMS-built-of-separated-templates in existence.
Instead of making a fake child with :after (or :before), just make a real child, in the markup.
Psuedo code:
<parent>
<float1/>
<float2/>
<div class="clear"></div>
</parent>
Now it’s a real child, and you just
.clear {
clear: both;
}
Sometimes this is the only option, especially in CMSes where the program brings together various chunks of pages, because each chunk can’t see any other chunks. Meaning, a container wouldn’t know if it had floated children, because Sally Secretary wanted to take your general Content box and have one thing next to another thing, so she told the CMS “set these things side by side” which means it floated them secretly behind her back. Meanwhile, the Content box doesn’t know what’s been going on inside, and unless you want to take every single container in your CMS and pre-emptively add in clearfixes or overflow:hidden (that one would be rather dangerous), a clearing div may make more sense.
As a note, I’ve seen more of these “front-end frameworks” like Twitter Bootstrap doing the pre-emptive thing. Every single element who could be a container of some sort gets a super-uber clearfix-like setup (usually with both a :before element AND an :after element, just for kicks and to get around some very tiny unexpected bugs found by Thierry Koblentz I think).
I think I’m forgetting one, but those are the other main options I know of.
display:inline-block on the parent will do it too, as will position: absolute, but the latter would be a very decided last resort in most cases.
@successfulfail If the above is a bit over your head, do let us know. But please post the code you have so far so we can be more specific. 
It will trigger Haslayout, so it would for IE6-7.
I’m not sure about other browsers… would depend if inlines had to “contain” other inlines inside them, which actually I didn’t think they did, looking at some of David Baron’s stuff about lines and line-heights…
*edit nope, you’re right. This seems to confirm it, looking around the text, and their example with the <P> and <SPAN> confirms, if you copy it and float the span.
Except IE6 if I recall correctly, related to that “children of abso-po can’t haz 100% height” or similar…
Suck it and see, as my graddad would say:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Inline-block contain</title>
<style media="all">
.contain {display: inline-block; background: #8CCC67; padding: 1%; width: 80%;}
div div {width: 44%; background: #D4D4CD; float: left;}
div div + div {float: right;}
</style>
</head>
<body>
<div class="contain">
<div><p>A div floated left</p></div>
<div><p>A div floated right</p></div>
</div>
</body>
</html>
You beat me.
My husband calls it TITS: Try It To See 
Due to my lacking coding knowledge and experience I think I should just place the slogan using CSS and place sites next to the Slogan.
Example CSS code:
background: url(/images/slogan.png);
Is there any way to view the result of this code on the local computer? Currently I have to upload the code to the hosting server to see the result…
Yes, but without more knowledge about your page and computer experience, I would think that uploading it to the server would be easier. Can you post a link to the site for us to see? We could provide better help if we could see the test code live.