Geek Answers Handbook

Separating two sections in CSS

Let's say I have two divs A and B that are currently aligned side by side. How can I get A to be separated by 50 pixels from B, while allowing A to occupy 70% of the remaining space and B the remaining 30%?

EDIT: Accepted the answer a little earlier than I actually tried. Oops

JSFiddles:

The Tale of Two Divs

Now separate , but now with the second on the second line?

+4
source share
5 answers

I believe your chosen answer will not work:

http://jsfiddle.net/cNsXh/

change
Sorry, the above example was not correct. Now this. / change

As you can see, div #b will move under div #a because margin-left (or padding-left ) will be added at 30% . And since we are mixing percentages with pixel values ​​here, we cannot determine the values ​​that guarantee that they will always be exactly 100%.

You will need to use a wrapper for div #b , which will have a width of 30% , and not define the width for div #b , but define margin-left . Since the div is a block element, it automatically fills the remaining space inside the div wrapper:

http://jsfiddle.net/k7LRz/

This way, you will bypass CSS <3, which, oddly enough, has been defined in such a way that determining the size (width / height) will NOT subtract the margins and / or spacers and / or the width of the border.
I believe the CSS 3 field model will provide more flexible options. But admittedly, I'm still not sure about cross-browser support for these new features.

+3
source

Try this 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>
+6
source

just set margin-left or padding-left from div B

+3
source

@wrongusername I know that you accept this answer, but you can check this solution, and in this you do not need to give additional mark-up , and if you give padding your div, this will not affect the structure.

CHECK THIS EXAMPLE: http://jsfiddle.net/sandeep/k7LRz/3/

+2
source

http://jsfiddle.net/efortis/HJDWM/

 #divA{ width: 69%; } #divB{ width: 29%; margin-left: 2%; }
+1
source

More articles:


All Articles