CHAPTER#4: HOW DIVS WORK
Mademoiselle; a layout tutorial threadCHAPTER 4: HOW DIVS WORK
Hi everyone! This is to fulfill amechania's request on how divs work.
Actually, this editor here is a div itself. Just styled with CSS and scripts. But we'll be discussing about how divs work when we create a a whoie new code.
To illustrate this simply, we'll use realistic principles.
< div style="float:left;width:200px;height:200px;background-color:#ccc" >content here< /div >
So, we made a 2D "container". Imagine this is a real container, with limits on how much it can handle.
We are going to add another div inside it.
Note that float:left property is very significant. For me it prevents your layout from getting messed up.
< div style="float:left;width:200px;height:200px;background-color:#ccc" >
< div style="float:left;width:50px;height:50px;background-color:#d3d3d3;" > < /div >
< /div >
See that little box there? We just replaced that content here with this code, creating another div with a different color and dimensions.
< div style="float:left;width:200px;height:200px;background-color:#ccc" >
< div style="float:left;width:50px;height:50px;background-color:#d3d3d3;" >
< div style="float:left;width:50px;height:50px;background-color:#d3d3d3;margin-left:5px">< /font >< /div >
< div style="float:left;width:50px;height:50px;background-color:#d3d3d3;margin-left:5px"> < /font >< /div >
< div style="float:left;width:50px;height:50px;background-color:#d3d3d3;margin-top:5px"> < /font >< /div >
< div style="float:left;width:50px;height:50px;background-color:#d3d3d3;margin-left:5px;margin-top:5px" > < /font >< /div >
< div style="float:left;width:50px;height:50px;background-color:#d3d3d3;margin-left:5px;margin-top:5px"> < /font >< /div >
< /div >
We've added more divs (boxes inside the container). See that little space there? There's an excess space because the smaller divs can't fit with inside the "container" anymore. Supposed I enlarged the "container" until it can handle a width of 50px, The smaller div (box) which is below the very first div (box) will fit in and the divs (boxes) per row would be four. (Do you get this part haha).
To conclude this, a div works just like a 2D container. It handles contents based on its width. Divs are also placeholders that can be used to put to different divs together and align them once, at the same time. For example you have this div that holds a picture with a width of 50px. And then another div beside it which has texts with a width of 100px. You want to place lots of those, in a column. All you have to do is put them all inside a div that has a width of 150px or so, if it has a margin (example margin-left: 5px, you have to make the placeholder div's width 155px for the picture and text to fit and arrange them in rows.) Like this:
Sometimes, there will be a problem with this tho:
(Felt lazy coding so I just drew it haha).And if ever this happens, all you have to do is enclose them individually in a div. Something like this < div style= "float:left " />< pic div/> < text div /> < /div > will do (and you can define the width so that two contents - the pic and texts - would fit). And you just have to copy and paste this repeatedly. This also makes it easier to adjust the margins of both pic and text div because you don't have to do it individually. You just have to do it in their placeholders.
That's all I could think of discussing about divs. If you are confused or have questions please comment and I'll gladly answer them :)
HI EVERYONE! BEEN LESS OF A CODER AND MORE OF A PROGRAMMER NOW. STILL, IF YOU HAVE REQUESTS PLEASE COMMENT BELOW ^_^
Comments