Stepan Stepan - 27 days ago 6
CSS Question

How to style 3 (div) boxes using CSS

I have this HTML page:

<!DOCTYPE html> <html lang="en"> <head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="styleBox.css">
<script src="script.js"></script> </head> <body>
<div>
<div>
<div>
text
</div>
</div>
</div> </body> </html>


This page should look like this - http://pasteboard.co/nFlMljzPG.png

I have tried something, but I do not know hot to style text inside third div
But without editing the HTML page

my css:

div {
width: 380px;
height: 300px;
background: #B0CDE9;
border-style: solid;
border-color: black;
border-width: 1px;
}

div div {
width: 290px;
height: 280px;
background: yellow;
margin-left: 45px;
margin-top: 8px;
}

div div div {
width: 120px;
height: 140px;
background: #82C940;
margin-top: 70px;

}


(my boxes are - http://pasteboard.co/nFo7mv7R7.png ) Could you advise me something please?

Nvj Nvj
Answer

Since you don't want to change the HTML code, you can just apply padding to the third div to position the text inside it. But you need to adjust the width and height of the div when you add padding. For example, if your div has a width of 120 px and you want the text to be 20px away from the left border, so you give a left padding of 20px and decrease the width by 20px. Thus, now you have a div with width 100px and padding left 20px. See the example below.

HTML

<div>
  <div>
    <div>
       text
    </div>
  </div>
</div>

CSS

div {
    width: 380px;
    height: 300px;
    background: #B0CDE9;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}

div div {
    width: 290px;
    height: 280px;
    background: yellow;
    margin-left: 45px;
    margin-top: 8px;
}

div div div {
    width: 100px;
    height: 60px;
    background: #82C940;
    margin-top: 70px;
    padding-top:80px;
    padding-left:20px;
}
Comments