A div in right with restricted width

Question

Page width available is 1600 px, I was trying to align the div in right, and with max-width: 1200px. But that is not happening.

.csystem {
  display: flex;
  max-width: 1200px;
  flex-direction: column;
  justify-content: flex-end
}

<div class="csystem">
  <h1>Yes</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>

You forgot a semicolon on justify content: flex-end on your css. — randomcoder, Jan 27 '20 at 03:54

score 3 · Accepted Answer · answered Jan 27 '20 at 04:03

3

You should use align-items not justify-content because you changed the flex-direction to column

.csystem {
  display: flex;
  max-width: 1200px;
  /* margin-left: auto; */ /* If you wnat the div to be on the right */
  flex-direction: column;
  align-items: flex-end;
}

<div class="csystem">
  <h1>Yes</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>

answered Jan 27 '20 at 04:03

Mohamed Abdallah

796
6
20

A similar solution not working [here](https://codepen.io/codeispoetry/pen/ExaJxmX) – beginner115 Jan 27 '20 at 04:07
it's working but the main container doesn't have the full width, if you want to container `.csystem` to be on the left as well add `margin-left: auto` see in this example https://jsfiddle.net/ – Mohamed Abdallah Jan 27 '20 at 04:16
margin is the key. Flex is not useful here simple display block and margin-left can do the needful. – beginner115 Jan 27 '20 at 05:21

score -1 · Answer 2 · answered Jan 27 '20 at 03:58

-1

Try this:

.csystem{
    float: right;
   max-width: 1200px;
}

answered Jan 27 '20 at 03:58

Rojen

336
1
2
13

can we do it through flex? – beginner115 Jan 27 '20 at 04:02
https://jsfiddle.net/30pzwoyv/1/ see this jsfiddle – Rojen Jan 27 '20 at 04:31

A div in right with restricted width

2 Answers2