Div does not align with the text

Question

Div does not align with the text

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

I'm trying to align div and text side by side, but it does not work at all, I've tried float, tb, align, and nothing works, please can you 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: link

html css

asked by anonymous 01.05.2016 / 22:26

2 answers

Android Delphi XE8 Home screen Insert multiple values into component

score 2 · Answer 1

1) You need to set a width so that its two elements appear side by side. Otherwise, both% w / w% and% w /% will be 100% wide and will not be side by side.

2) Define a width for each element so that they both fit in .title (in the example below, each .info has 100% width) and remove the margins.

3) Create a helper class named div to clean up its floating elements at the end (example in fiddle). Your container ( 50% ) loses the content reference when it is embracing floating elements.

4) If you want to give a margin to your element clearfix , for example, you must put the #sobre of that element by subtracting the value of the given margin. Ex.:

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

link

score 0 · Answer 2

An alternative is to use column-count or column-width in id sobre , and remove margin from p.title and also 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 at this link: link