CODEWITHSUNDEEP
htmlcss
liamzebedee
liamzebedee

Reputation: 14490

How would I achieve this CSS effect (centering content and padding)?

enter image description here

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;

Upvotes: 0

Views: 51

Answers (1)

cvsguimaraes
cvsguimaraes

Reputation: 13240

#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%;
}

Upvotes: 1

Related Questions