Home/ Questions/Q 9092939
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T22:57:50+00:00

I have the following code: <!DOCTYPE html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title></title> </head> <body> <style

  • 0

I have the following code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

   <style type="text/css">

       body, html{
    height: 100%;
}
        #outer {
            width: 90%;
            height: 90%;
            margin: 5% 5% 5% 5%;
            background-color: #333;
        }
        #left-content {
            height: 100%;
            width: 50%;
        }
        #right-content {
            height: 100%;
            width: 50%;
        }
    </style>

    <div id="outer" style="display: block">
      <div id="left-content" style="display: block; background-color: red;">xx</div>
      <div id="right-content" style="display: block; background-color: yellow;">xx</div>
    </div>

</body>
</html>

The outer DIV has a margin around it and inside that are two DIVs. I wanted to the two DIVs to be side by side but it seems that one is below the other.

How can I make them be side by side?

Another related question. For something like this would it be better to use display: table and then table-cell ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Using float for inner two div-boxes, for compatible for lower-version IE, the out box should also float, note the margin should be replace for padding. The display:block is redundant for box element like div.

       <style type="text/css">

       body, html{
       height: 100%;

}
        #outer {
            width: 90%;
            height: 90%;
            padding: 5% 5% 5% 5%;
            background-color: #333;
            float:left;
        }
        #left-content {
            height: 100%;
            width: 50%;
        }
        #right-content {
            height: 100%;
            width: 50%;
        }
    </style>

    <div id="outer" style="display: block">
      <div id="left-content" style="display: block; background-color: red;">xx</div>
      <div id="right-content" style="display: block; background-color: yellow;">xx</div>
    </div>

</body>
</html>
    • 0