I have 3 divs i.e div1 , div 2 , div 3
I want div1 and div 2 center aligned and side by side with a little gap in between.
div 3 would be just beneath div1 and div 2
see the desired screen here(attached)
How do I arrange div such a way ?
I understand I need to float 2 divs (i.e div1 and div 2 ) in one line..and need to put div3 in the next line.
my question is :
how do put I another div(i.e div3) in next line ?
how do I put a little gap between div1 and div2 which would work for all resolution.
Please look at the desired screen attached so that you'll understand what look I want
What is the solution ?
better yet, I would put div1 & div2 in another div, to contain them both, then just margin align them centered in that div. You can then just use padding on the right of div1, and the left of div2 to provide the space you need inbetween them.
margin: 0 auto;
padding: 0 50px 150px 25px;
padding: 0 50px 25px 150px;
margin: 0 auto;
There are plenty of ways to do this, and obviously yours isnt going to look like my example code. Depending on your main page width, the size of the divs, etc. But what you should focus on is the "float:"s and the "clear".
the "float: left;" makes the div float to the left side, while allowing the surrounding content to be on the right side of it.
You will notice if you do not use the "clear: left;" on the third div, that it will also move up on the right side of your second div. That is what the clear is for, it prevents anything from floating on the left side of it.
You could use different forms of measurement instead of pixels of coarse, if you want it to scale. But that is a whole other explanation entirely and should be researched on your own, to help you deciede on what you wish to use. It seems you are looking for Relative Units of Measurement. (be realize they will scale, and you need to know how much to let it scale, and let it stay fluid with the rest of the layout.) I always use "px" for div sizes. Which is relative, as most screens have different resolutions.
Here are the relative units of measurement:
px - pixels
em - em space
% - percentage of space avaliable on screen
ex - x space
Here are the non changing Absolutes:
pt - points (72 points per inch, 12 points to pica)
pc - picas (6 picas to an inch)
cm - centimeters
in - inches
mm - millimeters
Check those out to deciede what you want to do for your measurements.
But really to each his own, as everyone has their own ways of doing things, and different tasks require different things.
Also my code is just a quick explanation, take the "float:" and "clear:" lesson from it, only. So you can implement it in your own page.
If you need more help, code would help.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)