CODEWITHSUNDEEP
cssmarginpadding
AndroidDev
AndroidDev

Reputation: 21237

Trying to make div slide to the right

New to css. I have an image in the upper left of my page. To the right of that, I have two vertically aligned lines of text. I want to put some space between the right edge of my image and the left-most character of the text. I thought that either margin-left or padding-left would do this, but it's not working. What am I doing wrong? Thanks!

<div class="frame">
    <div class="page">
        <div class="myimage">
            <img id="mainpic" src="images/small.png" width="330px" height="220px">
        </div>

        <div class="title" >
            <h1>Some Title</h1>
            <p>Short explanation of what to do here.</p>
        </div>

    </div>
</div>

css file:

body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}

.frame{
}

.page{    
    margin:0 auto;
    width:1000px;
    height:1000px;
}

.myimage {
    position:relative;
    float:left;
    width="330px";
    height="220px";
    float:left;
}

.title{
    position:relative;
    float:left
    margin-left:100px;    <-- one approach, not working
    padding-top:100px;
    width="670px";
    height="220px"
    min-height="220px"

}

.title h1 {
    padding-left:100px;    <--another approach, still not working
    color:#000000;
    font-size:xx-large;
}

title p {
    color:#444444;
    font-size:large;
}

Upvotes: 0

Views: 47

Answers (2)

AndroidDev
AndroidDev

Reputation: 21237

Found the problem. No semi-colon after float:left. Add that to a long list of dumb oversights on my part.

Upvotes: 0

Astrus
Astrus

Reputation: 66

Margin-left does appear to correctly adjust the margin, however the 100px margin you have listed doesn't add any additional space due to to not being wider than the "myimage" tag immediately to the left of the "title" div.

One solution would be to make margin-left > than 330px (the width you defined for "myimage") or by simply using the CSS left property. 

left:100px;

Upvotes: 1

Related Questions