View original (French)

Positioning two div blocks side by side

vounce Posted messages 8 Status Membre -  
animostab Posted messages 3003 Registration date   Status Membre Last intervention   -
```html Hello,

I am a student training as a Webmaster (beginner) and I have an issue with one of my assignments. The goal is to position two blocks next to each other. I am achieving the result where the right block is slightly offset downwards compared to the left one.
Thank you for your help and here is my work:
HTML

<body>
<div id="bloc_1">
<div id="bloc_2">Block 2</div>
</body>

CSS

#bloc_1 {
width:250px;
height:250px;
position:relative;
top:200px;
left:300px;
background-color: green;
border:5px #000 solid;
text-align:center;
}

#bloc_2 {
float:right;
margin:0;
width:250px;
height:250px;
position:absolute;
top:0px;
left:400px;
background-color: green;
border:5px #000 solid;
text-align:center; ```

1 réponse

Réponse 1 / 1
Rajo
 
Hello,

You need to close your first div (is it a copy-paste oversight?).

Then, to position 2 elements, there are many methods. You just need to use one, and here you are trying to use several at the same time, which is inherently a bit contradictory.

First, remove your relative positioning (on the first div? relative to what?) and set the second one to absolute, so it's not taking the other div that precedes it into account.
Many positioning methods are based on positioning an element in relation to another (for example, with float) in the order of their appearance, so you position the second one relative to the first (whereas here you are trying to do the opposite). If you set it to absolute, the positioning is done relative to... I'll let you reread your course.

Otherwise, you also have this:
http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css.html
2
Rajo
 
and since I am nice, here is an example of positioning with CSS:

.bloc_gauche.div{
float:left; <!----- FLOATING POSITIONING ON THE LEFT (relative to the following element)-->
}
.bloc_droite.div{
float:right;<!----- FLOATING POSITIONING ON THE RIGHT (relative to the previous element)-->
}

Don't forget that float should be used sparingly, the 'floating' of elements indicates that they are taken out of the flow, and it is sometimes necessary to restore the flow (natural order of elements) by indicating with an element that will follow the CSS property clear:both; like a line break tag:

<br style='clear:both;' />

*note that bloc_gauche and bloc_droite are already more meaningful than bloc-1 bloc-2, imagine you have 50 how are you going to recognize what bloc_37 corresponds to? Impossible, whereas by explicitly writing what corresponds to what, it will help.

*I used a class rather than an id because if you want to reuse your classes you can (unlike the id which is unique as you know).
the .div of bloc_gauche.div is not mandatory, however it forces (by including it) to use the class for a div only (generally divs (short for divide) are used for this, span being the equivalent but for a text element only (therefore in a text tag).
0
animostab Posted messages 3003 Registration date   Status Membre Last intervention   738
 
There's even better
instead of using 2 divs with different ids, use 2 divs with the same class

<div class="div1"></div>
<div class="div1"></div>


the css

.div1 {
width:200px;
height:200px;
display:inline-block;
border: 5px solid black;
background-color: green;
text-align:center;
}

the only thing is inline-block creates a space between the 2 divs called white-space, but a little research will give you some tips to solve the white space problem.
you can also set the width in percentage for responsiveness
0