Layout Help

HTML & CSS
1

Hi there,

Coming from a photoshop/illustrator background, I am not very experienced with css at this point. I am having a little difficulty properly aligning my divs so that my layout all displays properly.

This is what I want it to look like:

Where my html looks something like:


<div id="wrapper">
        <div id="welcome"></div>
        <div id="header"></div>
            <div class="section">
                <div class="left_image">
                </div>
                <div class="right_images_container">
                    <div class="right_image"></div>
                    <div class="right_image"></div>
                    <div class="right_image"></div>
                    <div class="right_image"></div>
                    ……………               
                    ……………
                    <div class="right_image"></div>
                    <div class="right_image"></div>
                </div>
            </div>
            <div class="section">
                <div class="left">Lorem ipsum dolor sit amet…………</div>
                <div class="middle"></div>
                <div class="right">Lorem ipsum dolor sit amet…………</div>
            </div>
</div>

and my css looks like:


#wrapper{
	width: 940px;
	margin-top: none;
	margin-left: auto;
	margin-right: auto;
	border-style: solid;
	border-color: #D1D1D1;
	border-width:2px;
	background-color: #FFF;
}

#wrapper #welcome{
	height: 45px;
	background-color: #FFF;
	margin-left: 247px;
	margin-top: 11px;
}

#wrapper #header{
	height: 23px;
	background-color: #D1D1D1;
	width:940px;
	margin-top: 2px;
}

.section{
	border-style:solid;
	border-width: 1px;
	border-color: #D1D1D1;
	width: 820px;
	padding: 4px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:26px;
	background-color:#FCFCFC;
	display:inline;
}

.left_image{
width: 200px;
min-height: 50px;
display:inline;
}

.right_images_container {
float: left;
width: 440px;
margin-top: 20px;
}

.right_image {
opacity: 0.8;
position: relative;
float: left;
background: #ffffff;
-webkit-border-radius: 0px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 3px 1px #989898;
-moz-box-shadow: 0px 0px 3px 1px #989898;
box-shadow: 0px 0px 3px 1px #989898;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
padding: 5px;
width:50px;
height: 50px;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 1px;
}

Currently, a lot of it is displaying properly, but I cannot get the divs inside of the “section” headings to line up side by side. Any advice as to how to properly format my css to accomplish this task. General comments are also welcome.

Thank you very much.

2

You can use floats, positioning, changing the display properties to inline, inline-block, table-cell… There are a bunch of ways to line up elements next to each other. Maybe you could be a little more specific about what you want it to look like? The current design seemed a little complicated for me to try to put something together on my own.

(Maybe one of the attachments is what you’re after, but they haven’t been approved yet. You could upload an image to some site like imgur, and then link to that…)

3

OK, attachments approved.

The ideal would be if you could provide a live link. Then start by just getting one section at a time right, so just the header first. You really need to build this up step by step.

4

… CONTENT would help too… though coming from a photoshop background you might (from that image you do) have the fixed size mentality about layout – fixing the height of anything or using fixed size elements is quite often shooting yourself in the foot when it comes to building a page – which is why drawing the pretty picture in photoshop has next to nothing to do with building a website and is basically putting the cart before the horse.

Semantically marked up CONTENT first, then make the layout in CSS, THEN start up the paint program to hang your graphics on it… that way content dictates the layout instead of shoe-horning content into a layout that it’s unlikely to fit.

5

The weirdest problem in your CSS is that you have the rule “display: inline” set on the sections. But in the image you provided, the sections are supposed to be on top of each other, so I just took that rule out.

Then you had the left_image also set to “display: inline”, but again, I wasn’t sure why. You correctly (in my opinion, anyway; more correct than “display: inline”) tell the very next element, “right_images_container”, to float to the left, so I just did that for the left_image as well.

If you make these changes and then look at the page, it still doesn’t look quite right. The reason for it is because all of the children of the first section (last_image and right_images_container) are floated. So as far as the container is concerned, they don’t exist, and it collapses to a height of zero. In order to force the container to recognize its floated children, we can give it a style of “overflow: hidden”.

When we do that (only three changes to the CSS), things are looking much better. At least, the first section actually kind of resembles your picture. But getting the second section to match as well is just more of the same: Floating the children.

6

What DeathShadow said. :slight_smile: