Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Our Explore California layout is almost finished. Now we need to create the two-column layout using our main content, main navigation and sidebar. Remember that the main navigation and sidebar need to look like they are part of the same column, even though they are separated by the main content region. We will achieve this by floating the main content right and the sidebar in the main navigation to the left. We will also have to take special care to make sure that the sidebar and the main navigation areas never overlap or appear inside each other. We'll do this as well as assuring that the footer is going to remain in place by clearing our floats as well.
So I have the index file open and you can see we're sort of picking up where we left off. We still have some placeholder content here and there. So if you want to get rid of that "Content for ID header goes here" text, you can do that, because that doesn't need to be there anymore and now we need to concentrate on our mainNav, mainContent and sidebar. Now, we can see because of the fact that our Explore California header logo is being absolutely positioned, everything else is just moved up to occupy the space that it used to be in, and the first element, which is the blue one right here, is our main navigation and that is the first one that we're going to go ahead and start laying out using our floats.
So I'm going to go over to the CSS Styles panel, I'm going to double click mainNav and I'm just going to take care of a couple of properties here. We are going to go to the Box property. For float, I'm going to float it to the left, the width at 272 is fine, and I'm actually going to leave the height too. The reason I'm leaving the height is because I just want to show you some volume. Again, and you're actual layout, you would let the content form the height there. You wouldn't have that explicit value. So if you ever going to take this layout and kind of do something with this on your own and you want to experiment with it a little bit, be sure to remove the height value so that whatever you place in your navigation will take care of the heights for you.
And then the next thing we need to do is take care of the fact that the absolute positioned logo is removed from document flow. So there is nothing this is going to take our mainNav area and push it down. So we've got to allow for that. So what we're going to do now is still on the Box category we are going to deselect Same for all for margin and we're going to give this a top margin of 233 pixels. When I click OK, I can see that has pushed our mainNav area down and it leaves us about 20 pixels worth of space between the logo and the mainNav and that's caused by all this margin right up here. Perfect! Now let's go to our mainContent region and position it on the right-hand side of our page.
So let's go over to our CSS Styles, find the mainContent ID selector, and double click that. So here we are going to go to the Box category as well and we want to float this to the right. So we are going to float that against the right edge of the page instead of the left. We are going to leave the width at 608 pixels and we are actually going to leave the height at 600 as well. Again, we are just going to leave that height in there so that there's some volume to this. If we didn't, it would just collapse but in a real page layout you would place content inside there and that would form the height for you.
Now we are going to do a couple of things with margins and padding. So I'm going to deselect Same for all for padding and I'm going to give it a right padding of 25 pixels. What that's going to do for us is it's just going to hold off anything that's in the mainContent 25 pixels away from the edge of the wrapper. It's going to give us a nice little gutter or a margin if you will on the right-hand side. So why aren't we using margin? It's a personal choice. We could use margin there, but there is a bit of a problem with that. In older versions of Internet Explorer, if you float an element to one side and then also give it a margin on that side, you trigger a bug. Notice the doubled float margin bug.
In that case, we end up with twice the value of the margin we want and it's going to look terrible in that browser. By using padding here instead of a margin, we're avoiding that bug altogether. Finally, let's go to our margin and I'm going to deselect Same for all and do a bottom margin of 45 pixels. That means that any content underneath the mainContent such as the footer is going to continue to be pushed down by about 45 pixels of extra space. That's going to ensure that any content you place inside the mainContent won't end up right against the edge of the footer or any other element underneath it.
I'm going to go ahead and click OK and now our mainContent shows up exactly where we want it, and notice that it has its margin right down there at the bottom. Okay, well our mainNav is being positioned there but because the mainNav and the mainContent have both been floated, the sidebar, which is this green area, is now coming right up under everybody else. So now we need to go ahead and make sure that our sidebar becomes part of our two columns layout as well. So, I'll go over to my CSS Styles, find the sidebar, double-click that and now I'm going to go back down to our Box categories. We are going to float that to the left and we're going to leave the width at 272 pixels and I'll just leave the height at 300 pixels, again just to give it some volume.
Now we are going to do one thing a little bit differently here on the sidebar. In addition to floating the sidebar to the left, we are also going to clear it to the left. Hmmm, now why are we doing that? Well, remember, we don't want the main navigation and the sidebar to ever show up beside each other. It would break our two-column layout and it would make it look like a three-column layout. Well, normally that wouldn't happen just because we will probably have enough main content to keep that always sort of on the left-hand side. What happens if you're dealing with the page that doesn't have a lot of content in it and you have got a long sidebar and a long main navigation area? Well, what happens is if the mainContent region went out far enough, the sidebar will try to allow the main navigation to float to its left.
By telling the sidebar to clear to the left, you are basically telling it, "hey, don't ever let anybody float to the left of you" and that's going to keep it below the main navigation and then give them the appearance of big stack, one on top of the other. So we are going to go ahead and click OK there and now if I scroll down, I can see the sidebar and those guys were stacking one on top of each other and if it wasn't for their separate background colors, they would look as if they were in one single column. Perfect! Now our footer is the last thing we need to do and currently the footer is just coming right on up underneath everybody else, because these guys have all been removed from normal document flow.
So I'm going to double-click the footer, and we are going to go ahead and put in some properties for our footer here. Now we are going to put in more than you think probably because we're going to go ahead and put in the background graphic for the footer as well. I'm going to go to our Box category and the first thing that we are going to do is we are going to clear both. That way the main content that's floating on the right and the sidebar and the main navigation floating on the left will not effect the footer. The footer is going to remain below them. We are basically reestablishing normal document flow. Now, here is where things are going to get a little tricky.
It would be really easy to go ahead and leave the width of this at 930 pixels, but I want to give you guys a realistic example of some of the things that you have to deal with when you're dealing with CSS-based layouts. Eventually, our footer is going to have three columns of text in it. It's going to be quite an involved footer. And so because of that, we need to go ahead and allow for the fact that we don't want the content inside of it to butt right up against the edges. So what I'm going to do is deselect Same for all for padding. I'm going to go ahead and give it a top padding of 45 pixels, a right padding of 30 pixels, a bottom padding of 30 pixels and a left padding of 30 pixels.
Now because of the fact that we're adding 30 pixels to the left and 30 pixels to the right, we're adding an additional 60 pixels worth of width to our footer. So in order to make sure that it's not actually wider than the wrapper itself, we're going to change the width of the footer to 870 pixels. Now you might be asking, well, why do we have to define the width at all? If it's a block level element won't it expand if it's a parent container? Now you're right, it will. But we want to show a background image, and that background image has a defined width and a defined height.
I want to ensure that this is going to be large enough to display that. Speaking of that, we're going to change the height to 525 pixels. So it's going to have a width of 870, a height of 525. Padding is going to be top 45 and then right, bottom and left will have 30 pixels worth of padding. We are also going to go ahead and add a top margin of 45 pixels on that as well to increase the amount of space above the footer. So everything is looking pretty good. Last thing we need to do here is go ahead and grab the background image for our footer.
So I'm going to go to the Background category, I'm going to get rid of the background color that we have here, and I'm just going to browse for our background image. And once you're in the 10_09 images directory, you want to browse down and find this image right here, footer_back.gif. Notice it is 930 pixels wide by 600 pixels tall. So map of California, it's got some dark blue here where we can place some text on it, and then the tan color right here is going to do a nice job of blending that in with the background. We could've done that by using a PNG and having alpha transparency but really that's a really simple thing to do.
So involving transparency in something is as simple as that is probably unnecessary. I am going to go ahead and click OK. We only want to see it once. So for background-repeat, it's going to be no-repeat. Click OK again and there is my footer. If I save, if I do a Save All, and preview that in my browser, we can see the very beginnings of our layout. There is our footer, there is our sidebar, our main content region, and our main navigation. Once enough content gets in there to stretch that out, it's going to make the layout blend seamlessly into the background instead of what it's doing here and we are going to be in really, really good shape.
So the only thing our layout needs right now is content placed into the individual regions and then that interior content styled. Now, I know this doesn't look that impressive, but for the most part main page layout is done. The major page regions are laid out according to our overall strategy and one thing I want to point out that I haven't talked about yet. Notice that we've separated the layout styles from the styles that we will follow that are going to control typography and any sort of inner region areas. This strategy allows us to quickly tweak the main page layout and then quickly find and eliminate any cross browser issues or style overrides as we're constructing the rest of our page.
Of course, the more you add to the page, the more complicated things become. So in our next series of movies, we are going to explore some of the Dreamweaver tools that you can use to troubleshoot layout issues and refine your styles.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.