Construction of layout in CSS - css

Question

How do i go about piecing each and every div together?
I'm learning how to code in CSS and i'm fairly new, and i want to piece 3 - 8 pieces of the divs in each row. Once i've pieced some together, they appear uneven inside the dreamweaver IDE (and also inside the browser display).
Also, how do i get to resize them automatically? I've been trying width:100%; but all i'm getting is weird resized shapes and sizes.
If you don't get what i mean, my webpage technically looks like this
----------------------------------------------------------------------------------
| |
| background image 1 |
|--------------------------------------------------------------------------------|
| | | | |
| bg img 2 | bg img 3 | bg img 4 | bg img 5 |
| | | | |
|--------------------------------------------------------------------------------|
| |
| background image 5 |
| |
|--------------------------------------------------------------------------------|
but everytime i put my divs in the same row with a containing div for each row, i.e
<div class="container">
<div id="bg1" width:100; height:20;>
<div id="bg2" width:150; height:20;>
<div id="bg3" width: 250; height:20; >
<div id="bg4" width:130; height:20;>
</div>
</div>
</div>
</div>
</div>
it gets all jumbled up at the same location. Am i doing something wrong?
Would appreciate if someone could tell me a step by step solution...
Once again, i want to go about doing:
Construction of website with CSS for the layout.
Auto resizing of entire page according to web browser size.
Thanks.

Answer 1

First, don't use inline styles for prototyping something when you're a beginner. They're too hard to edit live. It will slow the process way way down.
You sound new to this, but that's cool! We all started somewhere.
Create your 5 divs first, and give them each a unique ID. IDs are for things that only appear on the page once. Classes are for things that appear more than once, or might at some future point appear more than once.
Then link a css file that your a separate declaration for each div. You're on the right track with width=100% for responsive design, although in practice it's often something like 92% even for a "full-width" div, because a little spacing is nice, and borders and padding add to the overall width. A 90% width div with 6% padding is always wider than the window itself (greater than 100%) which makes for strange behavior, so keep the box model in mind from the start.
Here are some tips I wish somebody had broken down to me early on:
Nowadays things are a LOT easier than they used to be for rapid prototyping CSS. The best way to figure this stuff out is to edit the stylesheet live in Chrome Developer Tools. Download and install Chrome if you're not using it already. Control click on your div and choose "Inspect Element." Play around in the inspector, and see how all the CSS styles can be edited live by doubleclicking on them and entering new values. If you click the "resources" tab you can see your whole stylesheet at once, and similarly edit the properties, and even add new ones. The best way to see what's happening with sizing is to temporarily declare an outline like:
#mydiv1 {outline: 2px dashed red;}
because outlines don't add to the width of the element, unlike borders. Then when you're done you can remove the outline declarations. Also keep in mind that any changes to a document's CSS in Chrome Dev Tools will be lost when you navigate away. So copy and paste your work into a text editor as you go.
If you're interested in responsive design, which is great, once you're getting good at all of the above, buckle in and read Ethan Marcotte's book:
http://www.abookapart.com/products/responsive-web-design
Marcotte's instructional approach is to start with pixels and then translate into percentages and ems in the stylesheet, but it doesn't need to be that way. You can design "live" with those variables in the browser.
hope this helps!

Answer 2

First of all, get rid of Dreamweaver. It's a hindrance. And has always been buggy. The sooner you get rid of that crutch, the better off you will be.
Secondly, looking at your example, I see a template for the old slice-n-dice photoshop into a table methodology. Replicating that with DIVs in CSS is rather pointless.
Third. If you truly need a table (data) keep it a table. Nothing wrong with that.
Fourth. The key to all of this is understanding floats and what contains floats. Most of the CSS grid systems base everything off of that. I'd take a look at 960.css and start playing with that a bit. It should help point you in the right direction of understanding what is going on.

Answer 3

You could use a <header> tag for the topmost part, and a <footer> tag for the bottom part. Clearly it works also with divs, but in my opinion it's cleaner that way.
That means that you'll have the following code:
HTML:
<header id="img1">
</header>
<div id="img2">
</div>
<div id="img3">
</div>
<div id="img4">
</div>
<div id="img5" class="newrow">
</div>
<footer id="img6">
</footer>
that could represent your desired structure pretty well. To style this, you can use CSS, and there are many possible solutions to the problem. One simple solution would be to set <header> and <footer> to 100% width, and to float all <div>s but the last one to the left, so that the remaining content (the other <div>s, in this case) will be on its right. Then you just have to set the width on all the <div>s, if you want you can even set it in percent, just make sure that it adds up to 100 or else you'll have a gap on the right. Also, you should put a margin-left on the last div to ensure that the content is placed properly.
This could be coded like this
CSS
body > header,
body > footer {
width: 100%;
clear: both;
}
body > div {
float: left;
}
#img2 {
width: 30%;
}
#img3 {
width: 10%;
}
#img4 {
width: 30%;
}
#img5 {
width: 30%;
}
body > div.newrow {
float: none;
margin-left: 70%;
}
You can see a little example of this code here, and you can grab it's code and play around with it here.
but like I said, there are many ways to achieve the layout you want, this is just one example.

Answer 4

As per your layout, what you want, Its better to have semantic HTML markup.
Example
<div class="containerWrap">
<div class="fullWidth"><img src="/imagePath"/></div>
<ul class="container">
<li id="bg1"><img src="/imagePath"/></li>
<li id="bg2"><img src="/imagePath"/></li>
<li id="bg3"><img src="/imagePath"/></li>
<li id="bg4"><img src="/imagePath"/></li>
</ul>
<div><img src="/imagePath"/></div>
<div>
CSS Would be
.fullWidth{
width:100%;
}
.containerWrap ul li{
list-style-type: none;
height:20px;
float:left;
}
#bg1{
width:100px;
}
#bg2{
width:150px;
}
#bg3{
width:250px;
}
#bg4{
width:130px;
}