Styling problem


#1


How do i bring that blue portion above ? below the pic above and next to pic on the left.
This is the styling for that. tried margins from all sides. Just not getting it right. 
CSS:
.button {
    height:10em;
    width:10em;
    background-color:blue;
    margin:5em 10em 10em 0;
    float:right;


#2

can we see full code? You could remove some of the margin-top? But full html and css code is better, given the relationship between elements is also important


#3

<!DOCTYPE html>
<html>
    <head>
        <link type=text/css rel="stylesheet" href="stylesheet.css"/>
            <title></title>
    </head>
    <body>
        <div id="header">A profile about Pomeranian husky!</div>
        <div id="navbar"></div>
            <ul> 
                <li>Home</li>
                <li>About me</li>
                <li>Hobbies</li>
                <li>Contact</li>
            </ul>  
        </div>    
        </div>

        <div>
            <table>
                <thead>
                    <tr>
                        <th colspan="3">Man's loyal friend</th>
                    </tr>    
                    <tr>
                        <td><img src="https://s-media-cache-ak0.pinimg.com/564x/58/02/e8/5802e896baeab674c32853b7ddfc9831.jpg"/></td>
                        <td><img src="http://cdn.patch.com/users/22841178/2015/02/T800x600/20150254dcf1b2ca0fb.jpg"/></td>
                        <td><img src="http://4.bp.blogspot.com/-Nh6PklKMiTE/T36_3o29QYI/AAAAAAAAArk/ycMetYGtfyc/s1600/Pomeranian-Dog-1.jpg"/></td>
                    </tr>
                    <tr>
                        <td><img src="https://s-media-cache-ak0.pinimg.com/236x/2b/b3/b9/2bb3b91a88aa09c7cf877861c3b948bc.jpg"/></td>
                        <td><img src="https://s-media-cache-ak0.pinimg.com/564x/e3/12/1b/e3121b05b3b5d5ff6d8987fe6e293005.jpg"/></td>
                        <td><img src="http://pommymommy.com/wp-content/uploads/2014/09/teacup-pomeranian.jpg"/></td>
                    </tr>
                    <tr>
                        <td><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQVbBk5Oy7KPu3jh2XmZUv0Lx0LOnEUejFyh84Yh-WanSi6EwTrag"/></td>
                        <td><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTz_PNmCZ7PlMDWE-5ZQe1-8rZodZZdV5y8hfqlsNyLk2xPUpkw"/></td>
                        <td><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT6lzfcPqmdyko9M1EDwbKRiXhpnNeEy-Kp2am6k5DKkJq62C6EWA"/></td>
                    </tr>
                </thead>
            </table>
        </div> 
        <div> 
           <h3>5 things we need to know:</h3>
                    <ol>
                        <li>The Pomeranian husky is the <b>cross between a Pomeranian and a husky</b>, and it’s a fairly small dog.</li>
                        <li><b>Appearance</b>: The pomsky does not always look the same. One puppy can look completely different from another</li>
                        <li><b>Price</b>: This is what’s going to get you; the average price for one of these puppies is anywhere upward of $1000.</li>
                        <li><b>Size</b>: Because these puppies are often a mixture of both parents, they can be virtually any size. Some end up being small around <b>15 pounds</b> while others are much large somewhere over <b>30</b>.</li>
                        <li>There are several very <b>distinct personality traits</b> the Pomeranian and the husky share, which makes it much easier to decide how these dogs are going to turn out.</li>
                    </ol>    
            </div>  
            <div class="footer">
                <img src="http://puppytoob.com/wp-content/uploads/sites/3/2014/10/pom1.jpg"/>They are family dogs.These are very active dogs that do not care to be ignored or left alone for long periods of time. When they are bored, which they are if no one interacts with them throughout the day, they will chew on your belongings. No amount of discipline is going to stop a dog of this nature from becoming too bored and chewing because they want to let you know that they are upset and in need of some interaction.These are dogs that do much better in homes with kids and in homes in which someone is home more often than not. If you work long hours or travel a lot for work or play, this is not the dog for you.</div>
            <div class="button">
            </div>
    </body>
</html>

CSS:
body {
    background-color:beige;
}
#header {
    width:90%;
    height:50px;
    background-color:#c774e8;
    border-radius:20px;
    border:1px solid violet;
    font-size:40px;
    font-weight:bold;
    text-align:center;
    padding:25px;
    margin:auto;
}
ul li {
    display:inline;
    border:3px solid #ffb8b8;
    font-size:20px;
    padding:5px;
}

table {
    border:2px solid #81a9ee;
    float:right;
}
th {
    font-size:20px;
}
td {
    height:100px;
    width:100px;
    border:2px solid #81a9ee;
}
td img {
    height:120px;
    width:120px;
}
h3 {
    text-decoration:underline;
    font-size:40px;
    margin-left:50px;
    font-family:Cursive;
}
    
ol li {
    font-size:20px;
    font-family:Cursive;
    display:block;
    border:1px solid black;
    float:left;
    width:70%;
    margin:3px;
}
.footer {
    height:40%;
    width:65%;
    background-color:#ff3636;
    clear:both;
    margin-left:30px;
    border-radius:5px;
    font-size:20px;
}
img {
    height:100%;
    width:50%;
    float:right;
}
.button {
    height:10em;
    width:10em;
    background-color:blue;
    margin:5em 10em 10em 0;
    float:right;

#4

block level elements (div) go below each other by default. You either need to use float or display: inline-block in order to change this


#5

it is just not working . Why is it not working ? not even moving a bit

.button {
    height:10em;
    width:10em;
    background-color:blue;
    margin:0 10em 10em 0;
    float:right;
    display:inline-block;

#6

don't use both, one of both will do. well your footer also needs to float: left or have a display inline-block, otherwise it won't allow the block along its side.


#7

Thanks..it solved the problem.
but why not use both ? Both are different. Should work in their own way.


#8

yea you can use both. just make sure to use the best solution, using both will probrally cause different behaviour


#9

okk. Thanks alot for help


#10