Home/ Questions/Q 1045667
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T16:01:14+00:00

I can’t find a good solution to this problem. I have 2 divs inside

  • 0

I can’t find a good solution to this problem. I have 2 divs inside a parent div. When I try and float the divs right and left to make 2 columns inside the parent div, the child divs end up underneath the parent div.

<head> 
    <link rel="stylesheet" type="text/css" href="float.css" />
</head>    

<body class="wrapper">
    <div class= "whole">
        <div class="left">
            <p> Hello </p>
        </div>
        <div class="right">
            <p> Hello Again</p>
        </div>
    </div>
</body>

CSS is

.whole {
    padding: 30px 30px 15px 30px;
    background-color: yellow;
    margin-bottom: 30px;
}
.left {
    width:50%;
    position:relative;
    float: left;
    background-color:green;
}
.right {
    width:50%;
    position:relative;
    float: right;
    background-color:red;
}

Why would the content in the child divs “right, left” be below the parent div “whole” ??

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try adding these properties to the parent eg whole:

    position:relative;
overflow:auto;

    And this css to child divs:

    position:absolute:
top: xxx;
left: xxx;

    Note that you should use id instead of class for an element which is supposed to be only one in the docume’nt.

    • 0