• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 585
  • Last Modified:

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

<!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;">
                        &nbsp;
                    </div>
                    <div style="background-color: Green; float:left; height: 32; width: 100%;">
                        &nbsp;
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Open in new window

current.JPG
required.JPG
0
Rakesh Jaimini
Asked:
Rakesh Jaimini
  • 5
  • 5
  • 4
  • +3
2 Solutions
 
Gurvinder Pal SinghCommented:
see this
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>
0
 
RobinSoftware EngineerCommented:
Remove the 'float:left' from the 2nd div.
0
 
igni7eCommented:
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.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
rajapandian_81Commented:
Hi,

Try below code


<div style="background-color: Red; float:left; width: 180px; margin: 0; padding: 0; height: 32px;">
                        &nbsp;
</div>
<div style="background-color: Green; height: 32px; ">
                        &nbsp;
</div>

Open in new window

0
 
RobinSoftware EngineerCommented:
Removing the float:left; from the 2nd div fixes the problem.

rajapandian_81 suggests that too.
0
 
Rakesh JaiminiAuthor Commented:
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


<!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;">
                        &nbsp;
                    </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;">
                                        &nbsp;
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Open in new window

issue.JPG
0
 
RobinSoftware EngineerCommented:
If you remove the 'width: 100%' style from the table, it will fix it again.
0
 
Rakesh JaiminiAuthor Commented:
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
<!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;">
                        &nbsp;
                    </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;">
                                        &nbsp;
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Open in new window

issue.JPG
0
 
rajapandian_81Commented:
Hi,

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;"> 
                        &nbsp; 
                    </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;"> 
                                        &nbsp; 
                                    </div> 
                                </td> 
                            </tr> 
                        </table> 
                    </div> 
                </td> 
            </tr> 
        </table> 
    </div> 
    </form> 
</body> 
</html>

Open in new window

0
 
igni7eCommented:
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:

<!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;">
                        &nbsp;
                    </div>
                    <div style="background-color: Green; float:left; height: 32; width: 85%;">
                        &nbsp;
                    </div>
                    <div style="clear: both;"></div>
                </td>
            </tr>
        </table>
    </div>


    </form>
</body>
</html>

Open in new window

0
 
Rakesh JaiminiAuthor Commented:
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
0
 
igni7eCommented:
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.
0
 
rajapandian_81Commented:
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%.
0
 
igni7eCommented:
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.
0
 
rajapandian_81Commented:
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
0
 
rajapandian_81Commented:
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 .
0
 
ModernMattCommented:
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
0
 
Rakesh JaiminiAuthor Commented:
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


0
 
Rakesh JaiminiAuthor Commented:
for moderators
i was going through igni7e Question History and i found following

http://www.experts-exchange.com/Community_Support/General/Q_25012632.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

http://www.experts-exchange.com/Community_Support/General/Q_25012641.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
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 5
  • 5
  • 4
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now