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:

1. Construction of website with CSS for the layout.
2. 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!