Hello i wanted to put a div and a h3 on the same line, i’m trying everything since yesterday but I don’t find any solution.

I want my words “Adaptée” and “Cohérente” next to they green square
Here is my HTML :
<div class="test"><div class="foo"></div><h3 class="title">Adaptée</h3></div>
<div class="foo"></div><h3 class="title"> Cohérente</h3>
And my CSS :
.title{
display: inline;
}
.test{
width: 100%;
}
.foo {
width: 10px;
height: 10px;
margin-top: 3px;
margin-right: 3px;
background: #8abb2a;
border-radius: 3px 0px 3px 0px;
}
Hello,
div and h3 are block elements and takes the complete width.
Fortunatly you can unblock this elements or use flexbox to do that for you.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
Best regards, anna-liebt
1 Like
Display the foo
class as an inline-block
:
.foo {
display: inline-block;
width: 10px;
height: 10px;
margin-top: 3px;
margin-right: 3px;
background: #8abb2a;
border-radius: 3px 0px 3px 0px;
}
Here is a site that might help to understand layout: http://learnlayout.com/toc.html
1 Like
@anna_liebt Hello,
Thank you again for you help. I learned new things in CSS !
@brandyshea Omg ! I tried a lot of things and this too I think, but I understand nothing about block, inline, etc. It works thank you and thanks for the link, i’m lost with this !
1 Like