Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Separating two divs with CSS

Tags:

html

css

web

Say I have two divs A and B, which are currently aligned side by side. How can I get A to be separated from B by 50px, while still letting A to take up 70% of the remaining space and B the remaining 30%?

EDIT: Accepted the answer a little early before I actually tried. Whoops.

JSFiddles:

A Tale of Two Divs

Now separated, but now with the second one on a second line?

like image 673
wrongusername Avatar asked Sep 23 '11 02:09

wrongusername


1 Answers

Try this out if it solves your problem.

<html>
<head>
    <style type="text/css">
        #Content
        {
            border: 3px solid blue;
            position: relative;
            height: 300px;
        }

        #divA
        {
            border: 3px solid red;
            position: absolute;
            margin-right: 25px;
            left: 5px;
            top: 5px;
            bottom: 5px;
            right: 70%;
        }

        #divB
        {
            border: 3px solid green;
            position: absolute;
            right: 5px;
            top: 5px;
            bottom: 5px;
            left: 30%;
            margin-left: 25px;
        }
    </style>
</head>
<body>
    <div id="Content">
        <div id="divA">
        </div>
        <div id="divB">
        </div>
    </div>
</body>
</html>
like image 80
Utkarsh Panwar Avatar answered Oct 23 '22 15:10

Utkarsh Panwar