css - Is my HTML logic correct about positions/pixels/divs/etc.? -
i'm trying make sure understand fully. suppose want page 600 pixels wide , 1000 pixels tall, separated 3 equally-spaced columns divs borders of 1 pixels each. divs should each 998 pixels high , 198 pixels wide, , should positioned absolutely respective (top, left) positions of (0,0), (0,200) , (0,400), because 600-pixels-wide body corresponds absolute horizontal pixel positions of 0 through 599. these 3 divs take entire width of body. don't have worry margins of divs or padding of body because values irrelevant when absolute positioning active. correct?
here's code:
<html> <head> <title>div practice</title> <style type="text/css"> body { height: 1000px; width: 600px; } .outercol { position: absolute; width: 198px; height: 998px; border: solid 1px black; } #co1 { top: 0px; left: 0px; } #co2 { top: 0px; left: 200px; } #co3 { top: 0px; left: 400px; } </style> </head> <body> <div class="outercol" id="co1"> <p>this text inside column 1</p> </div> <div class="outercol" id="co2"> <p>this text inside column 2</p> </div> <div class="outercol" id="co3"> <p>this text inside column 3</p> </div> </body> </html>
this happens when add padding div's now. demo
instead try have below. uses percentages makes little bit more difficult work out better in long run.
html:
<div id="container"> <div class="block"> block 1 </div> <div class="block"> block 2 </div> <div class="block"> block 3 </div> </div> css
#container { width: 600px; height: 500px; display: block; overflow: auto; } .block { float: left; width: 31%; padding: 1%; border: 1px solid black; } to increase padding, take width down 1% , have .5% add padding.
example:
width: 31%; padding: 1%; becomes
width: 30%; padding: 1.5%; and same goes other way.
hope makes sense
Comments
Post a Comment