CODEWITHSUNDEEP
csshtmlalignment
BraedC
BraedC

Reputation: 19

Objects Don't go in right place below div

I can't work out why any object will not go straight under the 3 divs.

Here is the HTML

<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>The Trek</title>
</head><body>
<div id="wrap">
<div id="main">
    <div id="bucket"><img src="img/golf.png" width="100%"><div id="button">Text</div></div>
    <div id="bucket"><img src="img/4wd.png" width="100%"><div id="button">Text</div></div>
    <div id="bucket"><img src="img/mara.png" width="100%"><div id="button">Text</div></div>
    <p>Text</p>
</div>
</div>
</div>
</body>
</html>

Here is the CSS

*{padding:0px;margin:0px;font-family:geneva;}
body{background-image:url(img/bg.png);background-repeat:repeat;}
#wrap{padding:50px;}
#main{margin:auto;padding:40px; width:900px;height:850px; position:relative;}
#bucket{width:30.2%;float:left; margin-right:40px;height:auto;display:block;}
#main div:last-child{margin-right:0px;}
#button {float:left;width:100%;height:auto;text-decoration:none;text-align:center;color:#eee;width:96.5%;height:100%; background:#633;text-decoration:none; padding:5px; font-size:20px;}

Any help will be appreciated!

Upvotes: 0

Views: 138

Answers (3)

Mitchell Layzell
Mitchell Layzell

Reputation: 3058

So there's a few suggestions I'll make about your code first, id="" is only used on a element that is only used once, typically you don't use them, instead use class="" which can be used as many times as needed on a page, you can select this by . instead of # in your CSS. The reason your <p> element was going beside is was because there was room for it next to the 3 <div>. Obviously a quick fix to this could be like @plalx said use clear: both; property but that's just covering up your error and not really fixing it. You could also use display: block on what ever element you want to go below. To really fix this issue you need to make use that the 3 <div> fill the width of it's container. I've cleaned up your code let me know if you have any questions, good luck!

EXAMPLE

HTML

<div class="wrap">
    <div class="main">
        <div class="bucket">
            <img src="http://placehold.it/350x150"/>
            <div class="button">Text</div>
        </div>
        <div class="bucket">
            <img src="http://placehold.it/350x150"/>
            <div class="button">Text</div>
        </div>
        <div class="bucket">
            <img src="http://placehold.it/350x150"/>
            <div class="button">Text</div>
        </div>
        <p>Text</p>
    </div>
</div>

CSS

/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
}
strong {
    font-weight: bold;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

*,*:before,*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background-image: url(img/bg.png);
    background-repeat: repeat;
    font-family: geneva;
}

img {
    display: block;
    max-width: 100%;
}
.wrap { 
    padding: 20px;
    width: 960px;
}
.main {
    margin: 0 auto;
    padding: 20px;  
}
.bucket { 
    display: inline-block;
    width: 31.33%;
    margin-right: 20px;
}

.bucket:last-of-type { margin-right: 0;}

.button { 
    width:100%;
    text-decoration:none;
    text-align:center;
    color:#eee;
    background:#633; 
    padding:5px;
    font-size:20px;
}

Upvotes: 0

Thanos
Thanos

Reputation: 3059

First of all you are using the same ID for multiple elements... Change this to a class. An ID must always be unique.

Clearing the floating is one way, but i don't like it as it becomes a bit messy later on.

My suggestion is to wrap your "bucket" elements into a div. This will solve your problem.

EXAMPLE

HTML

<div id="wrap">
    <div id="main">
        <div id="buckets">
            <div class="bucket">
                <img src="img/golf.png" width="100%" />
                <div class="button">Text</div>
            </div>
            <div class="bucket">
                <img src="img/4wd.png" width="100%" />
                <div class="button">Text</div>
            </div>
            <div class="bucket">
                <img src="img/mara.png" width="100%" />
                <div class="button">Text</div>
            </div>
        </div>
        <p>Text</p>
    </div>
</div>

CSS

* {
    padding:0px;
    margin:0px;
    font-family:geneva;
}
body {
    background-image:url(img/bg.png);
    background-repeat:repeat;
}
#wrap {
    padding:50px;
}
#main {
    margin:auto;
    padding:40px;
    width:900px;
    height:850px;
    position:relative;
}
.bucket {
    width:30.2%;
    float:left;
    margin-right:40px;
    height:auto;
    display:block;
}
#main div:last-child {
    margin-right:0px;
}
.button {
    float:left;
    width:100%;
    height:auto;
    text-decoration:none;
    text-align:center;
    color:#eee;
    width:96.5%;
    height:100%;
    background:#633;
    text-decoration:none;
    padding:5px;
    font-size:20px;
}

Hope this helps

Upvotes: 1

plalx
plalx

Reputation: 43718

It's because you did not cleared the left floating. There are several ways to achieve this, like:

#main p {
    clear: both;
}

This will prevent floated elements to the left or right of all p tags withing the #main element.

Upvotes: 0

Related Questions