Reputation: 113

Unable to move text within a div

I am trying to give the date a margin of 15px between the bottom of the header and the text itself, but it doesn't move no matter what I tried.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <script src="myscripts.js"></script>
    <title>The Impertus · Understand the News</title>
</head>

<body>
    <div id="Preheader">
        <img src="images/masthead.png">
        <div class ="ph" id="hd"></div>
        <p class="ph">May 14, 2016</p>
    </div>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css?family=Oswald');

html, body {
    background-color: #E1D4C0;
    margin: 0 0 0 0;
}

.ph {
    display: inline-block;
    margin-bottom: 15px;
}

#Preheader {
    height: 150px;
    width:100%;
    background-color: #104386;
    font-family: Oswald;
    color: #F5EDE3;
}

Created Fiddle here: https://jsfiddle.net/fhkh6ae0/

Upvotes: 1

Answers (4)

winresh24

Reputation: 687

Just add a padding in #Preheader and it will be okay. take a look https://jsfiddle.net/fhkh6ae0/3/

#Preheader {
    height: 150px;
    width:100%;
    background-color: #104386;
    font-family: Oswald;
    color: #F5EDE3;
  padding-bottom:15px; /*added*/
}

Upvotes: 0

Tanasos

Reputation: 4098

I think your issue lies in your html elements display property.

I see you are using this for the .ph class:

display: inline-block;

In order for your elements to align next to each other, but I think what you are trying to achieve here is possible by applying a float to your #hd and .ph elements:

float: left;

Here is some detailed information on CSS Floats by CSS-Tricks. The method you are using can be a good thing to do in a lot of specific situations, but for your specific case, I think this is the right path to take.

Here is a Fiddle for you.

You can see I changed some things and I added new things. One is the float property I am referencing above, and I have added an overflow: hidden property to the main container #Preheader , this is a fix for floating elements that try to escape their position or break your layout in bits. Remember the last one.

Upvotes: 0