Search code examples
htmlcssposition

Impossible to position horizontal line in HTML/CSS

I'm getting a little problem with my HTML page. I would like to set my horizontal line to the left side.

Up to now, my line is always situated in the center of my page and I don't reach to move this line between my text.

This is my little HTML script :

<html>
    <head>
    {% load staticfiles %}

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <link rel="stylesheet" type="text/css" href="{% static 'css/Base.css' %}"/>

    <style>

            body {
                font-family: Courier New, Courier, monospace;
                text-align: justify;
                list-style-type: none;
            }

            .header {
                 line-height: 80%;
                 margin:left;
            }
    </style>
    </head>

    <body>

        <div class = "header">
            <h3> Département </h3> 
            <p></p> 
            (variable)
            <hr align="left" width="10%"> 
            <h3> Commune </h3> 
            <p></p> 
            (variable)
        </div>
</html>

And my HTML page looks like :

enter image description here

Do you have an idea ?

Solution

  • You can try set display: inline-block; to your <hr> to render the horizontal line as an inline element with block properties.

    Also make sure that your markup and CSS is valid! E.g. a CSS rule margin: left; is wrong. Right would be: margin-left: 10px;.

    Plus: It's not recommended to use inline styles, as the code becomes less maintainable. Try defining the rules in the CSS section of your HTML document or a separate CSS file.

    .header {
  line-height: 80%;
}
hr {
  width: 10%;
  display: inline-block;
}
    <div class="header">
  <h3> Département </h3> 
  <p>(variable)</p>

  <hr>
  <h3> Commune </h3> 
  <p>(variable)</p>

</div>