0

Now I have two divs under a parent div:

<div id="block_container">
    <div id="bloc1">
        some words
    </div>

    <div id="bloc2">
      <input placeholder="...">
    </div>
</div>

where

#block_container
{
    text-align:center;
}
#bloc1, #bloc2
{   
    display:inline;

}
#contact textarea {
  width: 80%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: auto 0 5px;
  padding: 10px;
}

This is ok for the two div components to align center. However I would like two align them two to left-right end: [some words <----- Space -----> input box]. I've tried:

#block_container
{
    text-align:justify;
}

but that won't work.

Can you please kindly suggest to me how can I achieve this? Thanks.

Dana Mark
  • 45
  • 7
  • you can use `&nbsp` between those two controls. – Manjuboyz Apr 05 '20 at 08:33
  • @Manjuboyz but this cannot fit for various devices – Dana Mark Apr 05 '20 at 08:40
  • You can use flex, it will be compatible with different screen sizes. – Manjuboyz Apr 05 '20 at 08:42
  • You can use something like `.container { display: flex; justify-content: space-between; text-align: center; } #bloc1, #bloc2 { flex: 0 0 40%; width: 50%; }` In this example, the left and right block are both 40% – bron Apr 05 '20 at 08:44
  • @bron Thank you, tried but didnt help. What if Id like bloc1 of width 20% and bloc2 of 80%. Or maybe we can force the bloc1 (some words) occupy 20% width, and how to achieve that? – Dana Mark Apr 05 '20 at 08:50
  • Oops, there was a mistype in my line, it is `{ flex: 0 0 40%; width: 40%; }` . In your code you did leave out the html so helping is not possible, for example what is `#contact textarea` ? – bron Apr 05 '20 at 13:27

0 Answers0