Fri, 2013-09-13 11:48
Hi All,
Trying to make a simple layout but failed miserably. Need your support to correct it.
What I am trying:
1. Making a main container
2. Dividing the main one into two container : left and right one
3. Putting some button on the right container.
<!DOCTYPE HTML> <html> <head> <style> #main_c { border:1px solid green; width:600px; float:left; } #left_d { border:1px solid yellow; width:450px; float:left; } #right_d { border:1px solid blue; width:150px; } </style> </head> <body> <div id=main_c> <div id=left_d> <input name=u_name_val value=OK id=u_val type=button><br/> </div> <div id=right_d> <input name=u_name_val value=OK id=u_val type=button><br/> <input name=u_cancel_val value=Cancel id=u_val type=button><br/> <input name=u_help_val value=Help id=u_val type=button> </div> </div> </body> </html>
Fri, 2013-09-13 23:08
#1
Use the overflow property to
Use the overflow property to set new block formatting context. If it doesn't solve your problem, be more specific as to the problem and what you want to happen.
#main_c { border:1px solid green; width:600px; overflow: hidden; /*enclose float descendents without introducing new float issues*/ } #left_d { border:1px solid yellow; width:450px; float:left; } #right_d { border:1px solid blue; overflow: hidden; /*makes elements aware of the float next to it*/ width:150px; }
cheers,
gary
Sat, 2013-09-14 03:29
#2
Thanks Gary, Tried our code
Thanks Gary,
Tried our code though it does not sorted out my problem but what I found it is definately a overflow issue.
Ok First of all what I was trying to do:
1. I was trying to make a nested container where main_c was the main container and it had two further container in 2 columns.
2. Left container was left_d and right was right_d.
3. I put some buttons in right container and single button in left container.
What is the problem:
1. When I tried my code removing all borders, it worked well.
2. When I put borders back, the right container comes down
3. IF I increase the main container width by 5 pixels (equal to total border width)it gives the perfect layout.
So I concluded it is a overflow issue.
When I tried to run Gary's code, this is what happened:
1. Still right container comes down. But as per my under standing it should hide it.
I also tried to put Overflow value as auto and visible, in both cases it comes down.
Am I still doing something wrong here.
Pl help.
Regards,
Sat, 2013-09-14 05:28
#3
Delete the width from
Delete the width from #right_d
The overflow property is fulfilling a function different from strictly overflow. Google 'new block formatting context'.
cheers,
gary