3 replies [Last post]
arun67
arun67's picture
Offline
newbie
Last seen: 6 years 9 weeks ago
Timezone: GMT+5.5
Joined: 2013-09-13
Posts: 2
Points: 3

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>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 28 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

arun67
arun67's picture
Offline
newbie
Last seen: 6 years 9 weeks ago
Timezone: GMT+5.5
Joined: 2013-09-13
Posts: 2
Points: 3

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,

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 28 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.