Div does not line up with the text

Asked

Viewed 77 times

2

I’m trying to align the div and text side by side, but it doesn’t work at all, I’ve tried float, tb, align and nothing works someone please can give me a help.

#sobre {
    width: 100%;
    height: 100%;
    background-color: #0C0;
    background-size: cover;
}

.foto {
    width: 500px;
    height: 550px;
    margin-left: 100px;
    margin-top: 150px;
}

p.title {
    float: left;
    font-family: "Times New Roman", Times, serif;
    margin-top: 50px;
    margin-right: 225px;
    font-size: 80px;
    color: #FFF;
}

.infos {
    width: 400px;
    font-family: Arial;
    Helvetica,
    sans-serif;
    font-size: 16px;
    margin-top: 200px;
    background-color: #3CO;
    color: #FFF;
}
<div id="sobre">
    <p class="title">
        Sobre Mim:
    </p>
    <p class="infos">
        Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Integer vulputate sem a nibh rutrum consequat.
        Maecenas lorem. Pellentesque pretium lectus id turpis. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Fusce wisi. Phasellus faucibus molestie nisl. Fusce eget urna. Curabitur vitae diam non enim vestibulum interdum. Nulla
    </p>
</div>

jsFiddle: https://jsfiddle.net/u7sa5sdc/4/

html css

  • "the div and the text side by side" - what do you mean? the text is inside the div... you mean the .title and the .infos side by side?

  • Exactly, I would like . Tittle and . Infos to stand side by side.

  • display: inline;

  • @R.Ribeiro Thus? -> https://jsfiddle.net/u7sa5sdc/5/

  • http://www.w3schools.com/css/css_display_visibility.asp

2 answers

2

1) You need to set a width so that your two elements appear side by side. Otherwise, both your .title how much your .info are 100% wide and will not stand side by side.

2) Set a width for each element so that they both fit into 100% (in the example below, each div has 50% width) and remove margins.

3) Create a helper class called clearfix to clear your floating elements at the end (example in fiddle). Your container (#sobre) loses the content reference when it is embracing floating elements.

4) If you want to give a margin to your element .title, for example, it will be necessary to put the width of that element by subtracting the value of the margin given. Ex.:

p.title {
  margin-right: 10px;
  width: calc(50% - 10px);
}

https://jsfiddle.net/u7sa5sdc/7/

  • Thank you very much, that’s exactly what I was looking for. Upvoted

0

An alternative is to use the column-count or column-width in id sobre, and remove the margin of p.title and also the float Example:

#sobre {
/* seu estilo aqui */
-webkit-column-count:2;
}

p.title{
/* seu estilo aqui */
margin:0;
}

The only problem is that it may be necessary to use the prefix according to the browser. More info on this link: http://www.w3schools.com/cssref/css3_pr_column-count.asp

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.