Home/ Questions/Q 8063101
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T10:54:32+00:00

Question: I have the below HTML and want to have two divs horizontally next

  • 0

Question:

I have the below HTML and want to have two divs horizontally next to each other.
The left div should have the same height as the right div (or vice-versa if the left div’s height is greater than the right div’s height).
The left div’s size should be a fixed size in pixel, and the right div should expand to fill the container (no width to set), in this case 500px.

I don’t want to set a width on the second div, because ultimately, I want to set the wrapper’s size as percent.

With the HTML below, the second div goes below the first div.
Can anybody tell me how to fix this according to my wishes (should work in IE 9, too) ?

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>


    <style type="text/css" media="all">


        #wrapper 
        { 
            width: 500px; /* or say, 25% */
            border: 1px solid black; 
            overflow: hidden; /* add this to contain floated children */ 
        }

        #first 
        { 
            width: 100px; 
            float:left;
            border: 1px solid red; 
        }

        #second 
        { 
            border: 1px solid green; 
            width: 400px; /* don't want this */
            float: left;
        } 


    </style>

</head>


<body>

<div id="wrapper">
    <div id="first">
        Test left
        <br />
        Test left
    </div>
    <div id="second">
        Test right
        <br />
        Test right
        <br />
        Test right
        Auf der Registerkarte 'Einfügen' enthalten die Kataloge Elemente, die mit dem generellen Layout des Dokuments koordiniert werden sollten. Mithilfe dieser Kataloge können Sie Tabellen, Kopfzeilen, Fußzeilen, Listen, Deckblätter und sonstige Dokumentbausteine einfügen. Wenn Sie Bilder, Tabellen oder Diagramme erstellen, werden diese auch mit dem aktuellen Dokumentlayout koordiniert. Die Formatierung von markiertem Text im Dokumenttext kann auf einfache Weise geändert werden, indem Sie im Schnellformatvorlagen-Katalog auf der Registerkarte 'Start' ein Layout für den markierten Text auswählen. Text können Sie auch direkt mithilfe der anderen Steuerelemente auf der Registerkarte 'Start' formatieren. Die meisten Steuerelemente ermöglichen die Auswahl zwischen dem Layout des aktuellen Designs oder der direkten Angabe eines Formats. Wählen Sie neue Designelemente auf der Registerkarte 'Seitenlayout' aus, um das generelle Layout des Dokument s zu ändern. Verwenden Sie den Befehl zum Ändern des aktuellen Schnellformatvorlagen-Satzes, um die im Schnellformatvorlagen-Katalog verfügbaren Formatvorlagen zu ändern. Die Design- und die Schnellformatvorlagen-Kataloge stellen beide Befehle zum Zurücksetzen bereit, damit Sie immer die Möglichkeit haben, das ursprüngliche Layout des Dokument s in der aktuellen Vorlage wiederherzustellen. Auf der Registerkarte 'Einfügen' enthalten die Kataloge Elemente, die mit dem generellen Layout des Dokuments koordiniert werden sollten.
    </div>
</div>


</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you are using border then your width has additional 2px.So Add 4px to wrapper width

    #wrapper 
{ 
    width: 504px; /* or say, 25% */
    border: 1px solid black; 
    overflow: hidden; /* add this to contain floated children */ 
}

#first 
{   
    width: 100px; 
    float:left;
    border: 1px solid red; 
}

#second 
{  
    border: 1px solid green; 
    width: 400px; /* don't want this */
    float: left;
}

    Update :-Use table layout for this simple thing

     #wrapper 
        { display:table-row;
            width: 500px; /* or say, 25% */
            border: 1px solid black; 
            overflow: hidden; /* add this to contain floated children */ 
        }

        #first 
        { display:table-cell;
            width: 100px; 
            border: 1px solid red; 
        }

        #second 
        { display:table-cell;
            border: 1px solid green; 
         }
    • 0