CODEWITHSUNDEEP
htmlcss
Bronzato
Bronzato

Reputation: 9362

Having 2 blocks of text side by side

I try to have 2 blocks of text side by side. Can you help me?

Something like this:

enter image description here

If the page is resized, I would like the 2 blocks to be centered. I was not able to have my blocks side by side.

I create a jsFiddle here as a starting point: http://jsfiddle.net/LpJBm/2/

Thanks.

Upvotes: 1

Views: 57862

Answers (5)

Karthi Shan
Karthi Shan

Reputation: 71

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#block2
{
    background-color: #F5F5F5;
    margin: 10px 20px;
    padding: 20px;
    width: 180px;
}
</style>
</head>

<body>


    <div id="block1" style="float:left;">
        Merci d'avoir utilisé notre plateforme...
    </div>

    <div id="block2" style="float:right;">
        Nos bureaux sont ouverts du lundi au vendredi de 9h00 à 17h00
    </div>


</body>
</html>

try like this.........u get answer

Upvotes: 0

Eric
Eric

Reputation: 97691

Just float the gray box right:

#block2 {
    background-color: #F5F5F5;
    margin: 10px 20px;
    padding: 20px;
    width: 180px;
    float: right;
}

And swap the order of the HTML:

<div id="block2">
    Nos bureaux sont ouverts du lundi au vendredi de 9h00 à 17h00
</div>
<div id="block1">
    Merci d'avoir utilisé notre plateforme...
</div>

​http://jsfiddle.net/Eric/LpJBm/8/

Centering the boxes is a separate problem. To center anything horizontally, wrap it in a div, and apply

.wrapper {
    margin: auto;
    width: 400px; /*The width you want it to be when centered*/
    /* min-width works too */
}

In your case, you also need overflow: hidden, in order to force your wrapper to contain the floats.

http://jsfiddle.net/Eric/LpJBm/18/ ​

Upvotes: 1

chaenu
chaenu

Reputation: 2025

Float the div and wrap them to be centered: http://jsfiddle.net/Xj5Wy/

Upvotes: 3

PFK
PFK

Reputation: 116

try 

#block1
{
    margin: 10px 20px;
    padding: 20px;
    width: 400px;
    float: left;
}
#block2
{
    background-color: #F5F5F5;
    margin: 10px 20px;
    padding: 20px;
    width: 180px;
    margin-left:400px;
}

Upvotes: 0

Th0rndike
Th0rndike

Reputation: 3436

http://jsfiddle.net/LpJBm/4/

There it is. just add:

float:left;

to both divs.

Upvotes: 0

Related Questions