2 divs side by side firefox
Hi,
i need to place 2 divs side by side
table tr td is 100% width
td have 20px padding-right
first div is 180px wide
2nd div must take rest space
required.JPG
i need to place 2 divs side by side
table tr td is 100% width
td have 20px padding-right
first div is 180px wide
2nd div must take rest space
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title>Untitled Page</title>
</head>
<body style="margin: 0;">
<form id="form1" runat="server" style="margin: 0px;">
<div style="background-color: #efefef;">
<table cellspacing="0" cellpadding="0" style="width: 100%">
<tr style="height: 32px; width: 100%;">
<td style="padding-right: 20px; background-color: Aqua; width: 100%">
<div style="background-color: Red; float:left; width: 180px; margin: 0; padding: 0; height: 32;">
</div>
<div style="background-color: Green; float:left; height: 32; width: 100%;">
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
required.JPG
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
float left for the 2nd div is correct.
you need to change the width of the 2nd div as 100% is too wide for it to be on the same line.
try min-width 50% or _px , etc.
you need to change the width of the 2nd div as 100% is too wide for it to be on the same line.
try min-width 50% or _px , etc.
Hi,
Try below code
Try below code
<div style="background-color: Red; float:left; width: 180px; margin: 0; padding: 0; height: 32px;">
</div>
<div style="background-color: Green; height: 32px; ">
</div>
Removing the float:left; from the 2nd div fixes the problem.
rajapandian_81 suggests that too.
rajapandian_81 suggests that too.
ASKER
thanks for reply everyone
removing float:left from 2nd div fixes the problem
but it has created a new problem
as in my earlier code i haven't put anything inside 2nd div
but actually there is one table whose width is 100%
now after removing float:left right aqua padding is gone as per first image in question also scrollbar is coming which is not required
please check with the new code attached
removing float:left from 2nd div fixes the problem
but it has created a new problem
as in my earlier code i haven't put anything inside 2nd div
but actually there is one table whose width is 100%
now after removing float:left right aqua padding is gone as per first image in question also scrollbar is coming which is not required
please check with the new code attached
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title>Untitled Page</title>
</head>
<body style="margin: 0;">
<form id="form1" runat="server" style="margin: 0px;">
<div style="background-color: #efefef;">
<table cellspacing="0" cellpadding="0" style="width: 100%">
<tr style="height: 32px; width: 100%;">
<td style="padding-right: 20px; background-color: Aqua; width: 100%">
<div style="background-color: Red; float: left; width: 180px; margin: 0; padding: 0;
height: 32;">
</div>
<div style="background-color: Green; height: 32; width: 100%;">
<table cellspacing="0" cellpadding="0" style="width: 100%">
<tr style="height: 32px; width: 100%;">
<td>
<div style="background-color: Green; width: 100%; margin: 0; padding: 0; height: 32;">
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
hi
if i remove 'width: 100%' style from the table
now table is not expanding till end
check image
as per image ii want green colour not blue
if i remove 'width: 100%' style from the table
now table is not expanding till end
check image
as per image ii want green colour not blue
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title>Untitled Page</title>
</head>
<body style="margin: 0;">
<form id="form1" runat="server" style="margin: 0px;">
<div style="background-color: #efefef;">
<table cellspacing="0" cellpadding="0" style="width: 100%">
<tr style="height: 32px; width: 100%;">
<td style="padding-right: 20px; background-color: Aqua; width: 100%">
<div style="background-color: Red; float: left; width: 180px; margin: 0; padding: 0;
height: 32;">
</div>
<div style="background-color: blue; height: 32; width: 100%;">
<table cellspacing="0" cellpadding="0" >
<tr style="height: 32px; width: 100%;">
<td>
<div style="background-color: Green; width: 100%; margin: 0; padding: 0; height: 32;">
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Hi,
Try below code
Try below code
<html>
<head>
<title>Untitled Page</title>
</head>
<body style="margin: 0;">
<form id="form1" runat="server" style="margin: 0px;">
<div style="background-color: #efefef;">
<table cellspacing="0" cellpadding="0" style="width: 100%">
<tr style="height: 32px; width: 100%;">
<td style="padding-right: 20px; background-color: Aqua; width: 100%">
<div style="background-color: Red; float: left; width: 180px; margin: 0; padding: 0;
height: 32px;">
</div>
<div style="background-color: blue; height: 32px; overflow:hidden;">
<table cellspacing="0" cellpadding="0" width="100%" >
<tr style="height: 32px; width: 100%;">
<td>
<div style="background-color: Green; width: 100%; margin: 0; padding: 0; height: 32px;">
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
I'm still getting emails about this thread lol!
I thought it would have been fixed by now.. I said before that the two left floats were correct and they are, you just need a dummy div to show where the next line should be.
I didnt read any comments later on in this thread but from your first questions here's the answer:
I thought it would have been fixed by now.. I said before that the two left floats were correct and they are, you just need a dummy div to show where the next line should be.
I didnt read any comments later on in this thread but from your first questions here's the answer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title>Untitled Page</title>
</head>
<body style="margin: 0;">
<form id="form1" runat="server" style="margin: 0px;">
<div style="background-color: #efefef;">
<table cellspacing="0" cellpadding="0" style="width: 100%">
<tr style="height: 32px; width: 100%;">
<td style="padding-right: 20px; background-color: Aqua; width: 100%">
<div style="background-color: Red; float:left; width: 10%; margin: 0; padding: 0; height: 32;">
</div>
<div style="background-color: Green; float:left; height: 32; width: 85%;">
</div>
<div style="clear: both;"></div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
ASKER
Thankx guys for all your reply
the problem was much bigger then what i asked here
but finally i'm able to solve it by using
some css and javascript together
the problem was much bigger then what i asked here
but finally i'm able to solve it by using
some css and javascript together
What a joke...
my solution gave u exactly what you requested
You also excepted this answer which is completely incorrect; proved by my solution in my last post.
"Remove the 'float:left' from the 2nd div."
The problem what not "much bigger", i fixed it to be exactly what you asked for, and nobody else was capable of that, some gave u incorrect code that did half the job because those answers were wrong, yet I gave u a full working solution.
my solution gave u exactly what you requested
You also excepted this answer which is completely incorrect; proved by my solution in my last post.
"Remove the 'float:left' from the 2nd div."
The problem what not "much bigger", i fixed it to be exactly what you asked for, and nobody else was capable of that, some gave u incorrect code that did half the job because those answers were wrong, yet I gave u a full working solution.
Hi igni7e,
Have you read my answers or not? How can you say "nobody else was capable of that"?
Without reading all answers don't give such comments.
However your answer is wrong. Because in question it's mentioned that first div is 180px wide. But you gave 10%.
Have you read my answers or not? How can you say "nobody else was capable of that"?
Without reading all answers don't give such comments.
However your answer is wrong. Because in question it's mentioned that first div is 180px wide. But you gave 10%.
I'm sorry for assuming that you have the technical skills to swap some numbers around.
I'm also sorry for thinking you'd be able to put my two posts together, which would have also given you the solution.
But my answer is still far more accurate than the solutions you accepted;
I read the solutions you marked as correct and complained - this means that Yes I did read the answers. Not only were those answers worse than my solution, they were 100% inaccurate, which I proved in my solution.
I accept that you do not have the technical skills to realise that my answer was the correct solution but it is. You can keep the question marked as it is since you actually didn't use my answer, but the 9.0 rating for a 100% incorrect solution is a bit ridicilous.
I'm also sorry for thinking you'd be able to put my two posts together, which would have also given you the solution.
But my answer is still far more accurate than the solutions you accepted;
I read the solutions you marked as correct and complained - this means that Yes I did read the answers. Not only were those answers worse than my solution, they were 100% inaccurate, which I proved in my solution.
I accept that you do not have the technical skills to realise that my answer was the correct solution but it is. You can keep the question marked as it is since you actually didn't use my answer, but the 9.0 rating for a 100% incorrect solution is a bit ridicilous.
Hi igni7e,
Don't be hurry when you are reading and giving comments. The comment #26281892 is not posted by author of the question. But you are replying to author. I accept that author can't get 100% solution from the comment which he marked as correct.
Again I am saying that your answer is wrong. If you change the 10% to 180px(In your words "technical skills to swap some numbers around"), the green colour div will move downwards when you minimize the width of browser which is not acceptable. Refer screenshot.
Div.PNG
Don't be hurry when you are reading and giving comments. The comment #26281892 is not posted by author of the question. But you are replying to author. I accept that author can't get 100% solution from the comment which he marked as correct.
Again I am saying that your answer is wrong. If you change the 10% to 180px(In your words "technical skills to swap some numbers around"), the green colour div will move downwards when you minimize the width of browser which is not acceptable. Refer screenshot.
Div.PNG
modus_operandi,
The question can be closed as it is. Somehow the marked answer may help the author.
Author solved the problem by adding some more css and javascript .
The question can be closed as it is. Somehow the marked answer may help the author.
Author solved the problem by adding some more css and javascript .
I am asking the Zone Advisor to evaluate the answers provided here. Please allow a couple of days for that to happen.
ModernMatt
Experts Exchange Moderator
ModernMatt
Experts Exchange Moderator
ASKER
omg I couldn't believe that igni7e will behave like this
it was clearly mention in the question that i want first div width as 180px
i wanted a solution in which first column is in px and other one in %
also i wanted solution to be the resolution independent without a scrollbar
your solution was wrong from the start where you took first column as %
and in first ans u said that
"you need to change the width of the 2nd div as 100% is too wide for it to be on the same line."
which is not acceptable at all
i accepted those 2 ans which helped me in getting my problem solved
as i earlier said problem was much much bigger.
the UI i gave is part of the master page of 5 year long project.
and deviation in design results in deep impact on complete application
and as far as my technical skills are concerned its far better then yours(igni7e) even if you go with expert exchange's profile
it was clearly mention in the question that i want first div width as 180px
i wanted a solution in which first column is in px and other one in %
also i wanted solution to be the resolution independent without a scrollbar
your solution was wrong from the start where you took first column as %
and in first ans u said that
"you need to change the width of the 2nd div as 100% is too wide for it to be on the same line."
which is not acceptable at all
i accepted those 2 ans which helped me in getting my problem solved
as i earlier said problem was much much bigger.
the UI i gave is part of the master page of 5 year long project.
and deviation in design results in deep impact on complete application
and as far as my technical skills are concerned its far better then yours(igni7e) even if you go with expert exchange's profile
ASKER
for moderators
i was going through igni7e Question History and i found following
https://www.experts-exchange.com/questions/25012632/02-Jan-10-23-Automated-Request-for-Attention-Q-25012561.html
in above moderator said
Hi igni7e,
You've made your point (rudely, I might add) in the question. The asker is free to accept whichever solution works best for them and I don't see a need to overturn the award.
WhackAMod
Experts Exchange Administrator
and other 1 is
https://www.experts-exchange.com/questions/25012641/03-Jan-10-00-Automated-Request-for-Attention-Q-25012492.html
Hi again igni7e,
As before, the Asker can accept whatever code works for them. We will not overturn it unless it is blatantly wrong. Ineffecient is not enough.
However, I am seeing a disturbing trend in your responses to the close. Calling the askers n00bs is unprofessional at best and downright rude at worst. Please don't do it again.
WhackAMod
Experts Exchange Administrator
from above we can conclude that igni7e behaviour is not good with the askers
this is habit of igni7e insults asker and other EE members
please take action appropriately
i was going through igni7e Question History and i found following
https://www.experts-exchange.com/questions/25012632/02-Jan-10-23-Automated-Request-for-Attention-Q-25012561.html
in above moderator said
Hi igni7e,
You've made your point (rudely, I might add) in the question. The asker is free to accept whichever solution works best for them and I don't see a need to overturn the award.
WhackAMod
Experts Exchange Administrator
and other 1 is
https://www.experts-exchange.com/questions/25012641/03-Jan-10-00-Automated-Request-for-Attention-Q-25012492.html
Hi again igni7e,
As before, the Asker can accept whatever code works for them. We will not overturn it unless it is blatantly wrong. Ineffecient is not enough.
However, I am seeing a disturbing trend in your responses to the close. Calling the askers n00bs is unprofessional at best and downright rude at worst. Please don't do it again.
WhackAMod
Experts Exchange Administrator
from above we can conclude that igni7e behaviour is not good with the askers
this is habit of igni7e insults asker and other EE members
please take action appropriately
http://www.welovecss.com/showthread.php?t=465
#leftcolumn { width: 300px; border: 1px solid red; float: left}
#rightcolumn { width: 300px; border: 1px solid red; float: right}
<div id="leftcolumn"><p>text goes here</p></div>
<div id="rightcolumn"><p>text goes here</p></div>