Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML and CSS: 2 DIVS on left, 1 independent DIV on right

I didn't find an answer for this specific case of mine, so I decided to ask a new question. I want to have 2 DIVs on the left side of the page (with a fixed width) and a single DIV on the right side, occupying the rest of the page width. Also the single DIV on the right should have its independent height (when its height is increased it shouldn't affect the height or position of the DIVs on the left). Something like this is what I want:

Divs

This is the HTML code:

<body>
    <div class="div1">Div1</div>
    <div class="div3">Div3</div>
    <div class="div2">Div2</div>
</body>

This is the CSS I have right now:

div.div1 {
    float: left;
    height: 400px;
    margin-right: 10px;
    width: 200px;
}

div.div3 {
    height: 425px;
    overflow: hidden;
}

div.div2 {
    clear: left;
    float: left;
    height: 15px;
    margin-top: 10px;
}

The only problem is that Div2 top position is affected by the height of Div3 and I get something like this: Wrong DIVs

like image 761
ali Avatar asked Dec 03 '13 12:12

ali


People also ask

How can you two child divs one to left and other to right in a parent div?

The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.

How do I align two divs side by side in CSS?

Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; This property is used for those elements(div) that will float on right side.

How do I put divs side by side?

(You'll see why in a bit.) To position the divs side by side, we are using the float property to float each . float-child element to the left. Since they are both floating to the left, they will display side by side if there's enough space for both to fit.

How to align 2 divs beside each other in HTML?

In this article, we will learn about aligning 2 divs beside each other in HTML. The <div> tag is a block-level element i.e. it always starts on a new line and takes all the width available to both left and right sides.

How do you style two DIVS in HTML?

Individual styling of divs: The two <div> tags can also be individually styled using style property. Output: The first <div> tag is floated to the left and the second <div> tag is floated to the right. However, they are aligned to each other horizontally with a lot of space.

How to use <div> tag in HTML?

More "Try it Yourself" examples below. The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript. The <div> tag is easily styled by using the class or id attribute. Any sort of content can be put inside the <div> tag!

How to add a margin to a Div using CSS?

Use a <div> element with the class named “container”. Add two other <div> elements within the first one. Add classes to them as well. Specify the width and height of the "container" class. Set the position to "relative" and add the margin property.


1 Answers

Try this:

<html>
<head>
<style>
    div.div1 {
        float: left;
        height: 400px;
        margin-right: 10px;
        width: 200px;
        background-color: blue;
    }
    div.div2 {
        clear: left;
        float: left;
        height: 15px;
        width: 200px;
        margin-top: 10px;
        background-color: red;
    }    
    div.div3 {
        height: 425px;
        overflow: hidden;
        background-color: green;
    }
</style>
</head>
<body>
    <div class="div1">Div1</div>
    <div class="div2">Div2</div>
    <div class="div3">Div3</div>
</body>
</html>

Once I re-ordered the Divs and added a width for Div 2 it works fine

https://jsfiddle.net/6g7qx26b/

This also works if you replace the css height properties with min-height properties, allowing for greater flexibility. Widths may also be specified in percentages

like image 77
Tim Avatar answered Sep 23 '22 08:09

Tim