Question

I was wondering how I could achieve this effect. Firstly content currently is in a div called ‘contentDiv’. I have all the following content float:right of the div. What I want to achieve is an imaginary border (look at image) in which the content cannot cross.
Then I want the content to be centered.
How would I achieve this with CSS? Or what elements could I use to replicate this effect.
I have looked into centering the content and this code works for me –

margin-left: auto;
margin-right: auto;

Answer 1

#contentDivParent {
    /*It will define the imaginary border*/
    padding-left:30%;
    width:70%;
}

#contentDiv {
  /*remove the float*/
  float:none;
  /*center*/
  margin:0px auto;
  /*force line-break*/
  max-width:100%;
}