Menu
I'm trying to make the parent div only as wide as the child div's. Auto width is making the parent div fit the entire screen. The children divs will be different widths depending on their content so I need the parent div to adjust accordingly.
<div style='width:auto;'> <div style="width: 135px; float: left;"> <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4> <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;"> <dd style="white-space: nowrap;">1</dd> <dd style="white-space: nowrap;">2</dd> </dl> <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4> <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;"> <dd style="white-space: nowrap;">1</dd> <dd style="white-space: nowrap;">2</dd> </dl> </div> <div style="width: 135px; float: right;"> <h4 style="padding-right: 5px; padding-left: 10px;">Column2</h4> <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;"> <dd style="white-space: nowrap;">1</dd> <dd style="white-space: nowrap;">2</dd> <dd style="white-space: nowrap;">3</dd> </dl> </div> </div> 
676
Divs size to 100% the size of their container width automatically. Try using display:inline-block instead of width:auto on the container div. Or possibly float:left the container and also apply overflow:auto .
Set display to inline-block to make the div width fit to its content. Use position: relative and left: 50% to position its left edge to 50% of its containing element. Use transform: translateX(-50%) which will "shift" the element to the left by half its own width.
Method 1: First method is to simply assign 100% width and 100% height to the child div so that it will take all available space of the parent div. Consider this HTML for demonstration: HTML.
In this case, we set the child element's width to be 100% of the viewport width by using a percentage viewport unit (vw), then, we move it to the left side (by the distance of the viewport's half, minus 50% of the width of the parent element) with the left property.
Your interior <div> elements should likely both be float:left. Divs size to 100% the size of their container width automatically. Try using display:inline-block instead of width:auto on the container div. Or possibly float:left the container and also apply overflow:auto. Depends on what you're after exactly.
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
