CODEWITHSUNDEEP
csshtml
Willard
Willard

Reputation: 425

Positioning Divs Within a Wrapper Div - Overflowing

I'm currently building a website that contains a structure that I haven't yet built in my experience. It involves a layout that requires multiple sections to be joined together within a wrapper. This is my first time doing this & I'm running into problems. I just want to make sure that I do this correctly. The main issue that I'm running into is a div spilling over & messing up the layout.

My desired layout: http://oi40.tinypic.com/2vs403b.jpg

What I've got so far: http://tinyurl.com/ognbkx2 You can see the "Lets Connect" portion overflowing & messing up the layout.

How can I fix this? Your help is much appreciated!!!!

HTML

<div id="about-wrap">
<div class="portrait">
<img src="/andrew/images/andrew.jpg"></img>


<div class="about-me">
ABOUT ME<br>
<img src="/andrew/images/about-divide-1.jpg"></img>
<p>
Snipped
</p>


<div id="resource-wrap">
<div class="resume"> 
RESUME<br>
<img src="/andrew/images/about-divide-2.jpg"></img>
PDF | WORD

<div class="connect">
LETS CONNECT<br>
<img src="/andrew/images/about-divide-3.jpg"></img>
TWITTER | FACEBOOK | LINKEDIN


<div id="exp-thumb-wrap">
I'VE DONE WORK FOR
<img src="/andrew/images/about-divide-1.jpg"></img>

<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""/></a>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""/></a>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""/></a>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""/></a>
<span class="stretch"></span>


<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""/></a>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""/></a>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""/></a>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""/></a>
<span class="stretch"></span>




</div>
</div>
</div>
</div>

CSS

/*About Wrap*/

#about-wrap { 
    position: relative;
    top: 440px;
    margin-right: auto;
    margin-left: auto;
    width: 960px;
    height: 440px;
    background: #FFFFFF;


}

.about-me {
    height: 160px;
    width: 460px;
    float: left;
    margin-right: 20px;


}


/*Resources Wrap*/

#resource-wrap {

    height: 60px;
    width: 460px;
    float: left;



}

.resume {

    height: 60px;
    width: 130px;
    float: left;
    margin-right: 10px;

}

.connect {

    height: 60px;
    width: 300px;
    float: left;


}

/*Brand Experience Wrap*/


#exp-thumb-wrap {

    height: 160px;
    width: 460px;
    float: left;
}


.exp-thumbs {   
    width: 104px;
    height: 45px;
    float: left;
    margin-right: 10px;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}


/*Portrait*/


.portait {
    width: 460px;
    height: 408px;
    margin-right: 0;
    margin-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
    float: right;

}

Upvotes: 0

Views: 1262

Answers (2)

AndrewB
AndrewB

Reputation: 836

A lot of your code is just wrong, open firefox, right click on the page and click "view page source", all the red text is error code, you've got a meta tag outside the head tag. You open head then close it, then close it again, leaving a stray /head tag.

You have a /div tag that isn't closing anything. Its hard to see what tags match with what because they are not indented properly.

You have two doctypes, two heads and two bodies. You should only have one of each per page.

img tags don't end with /img they are just img href="" / (notice the "/")

I suspect once you fix those things your problem might disappear. Its a good place to start, once you've fixed them update the site and see if it's working.

~A

Upvotes: 1

PSL
PSL

Reputation: 123739

It is infact not overflowing it is because you are including the div inside each other instead of directly putting them unser div resource-wrap. See if this is what you are looking for.

Html

<div id="resource-wrap">
<div class="resume"> 
RESUME<br>
<img src="/andrew/images/about-divide-2.jpg">
PDF | WORD


</div>
<div class="connect">
LETS CONNECT<br>
<img src="/andrew/images/about-divide-3.jpg">
TWITTER | FACEBOOK | LINKEDIN



</div>
<div id="exp-thumb-wrap">
I'VE DONE WORK FOR
<img src="/andrew/images/about-divide-1.jpg">

<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""></a>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""></a>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""></a>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""></a>
<span class="stretch"></span>


<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""></a>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""></a>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""></a>
<a class="exp-thumbs" href="#"><img src="/andrew/images/exp-thumb.jpg" alt=""></a>
<span class="stretch"></span>




</div>
</div>

Css

.connect {
height: 60px;
width: 300px;
float: right;
}

Upvotes: 2

Related Questions