I have the following html structure:
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
The parent is positioned absolutely, child1 and child2 are displayed side-by-side using inline-block.
I need this whole thing to be responsive based on the width of the 2 children divs. the problem is, if I increase the width of any of them, the parent's width remains the same. Changing its position to relative fixes this, but I have to have it in absolute.
Is there anyway to get it to be responsive?
EDIT:
I was hoping for this to be simple, but apparently not so much... :(
here's the actual HTML:
<div class="action_container">
<div class="action_inner">
<div class="action_title">Format Text</div>
<div class="action_body">
<div class="action_args_section"></div>
<div class="action_output_section"></div>
</div>
</div>
</div>
And the CSS:
<style>
.action_container {
display: block;
position: absolute;
}
.action_inner {
border: 1px solid black;
}
.action_inner {
min-width: 120px;
min-height: 50px;
background-color: white;
border: 1px solid #666;
border-radius: 5px;
}
.action_title {
font-size: 12px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ccc;
padding: 3px;
}
.action_args_section {
display: inline-block;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 3px;
}
.action_output_section {
display: inline-block;
width: 50px;
vertical-align: top;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 3px;
}
</style>
.parent{
position: absolute;
display: table;
}
.child{
position: relative;
display: table-cell;
}
Use this trick to set children in single line and parent to get width from them. Don't apply floats to nothing. And remember about white-space: nowrap; if You need to keep single line in child elements.
Here is fiddle.
.parent {
position:absolute;
height:50px;
border:1px solid red;
}
.child1 {
width:100px;
height:30px;
border:1px solid green;
}
.child2 {
width:150px;
height:30px;
border:1px solid blue;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
Is this what you're looking for?
JSFiddle
.parent{
position:absolute;
left : 60px;
top : 60px;
width : auto;
height:auto;
border:1px solid black;
}
.parent .child{
display:inline-block;
border:1px solid blue;
}
<div class="parent">
<div class="child">aaaaaassssssssssssss</div>
<div class="child">sssssssccccccccccccccccccc</div>
</div>
Try use a max-width to set a maximum width for the parent div so it doesn't get wider than specified.
I did this easily. Changing the width of the divs changes the parent as well.
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
<style>
div{border:1px solid black;}
.parent{
position:absolute;
width:auto;
height:auto;
}
.child1{
display:inline-block;
width:40px;
height:40px;
}
.child2{
display:inline-block;
width:30px;
height:40px;
}
</style>
If you want a responsive design, make sure you're using percentages, and not pixel values because the size of the divs will be calculated by the viewport width.
If you just want the parent to resize based on the absolute sizes of the child divs, add height:auto; width:auto to the parent. Then, change the child divs to display:block; float:left. The parent will resize accordingly.
Updated CodePen Demo
CSS
.action_container {
display: block;
position: absolute;
height:auto;
width:auto;
}
.action_inner {
border: 1px solid black;
}
.action_inner {
min-width: 120px;
min-height: 50px;
background-color: white;
border: 1px solid #666;
border-radius: 5px;
}
.action_title {
font-size: 12px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ccc;
padding: 3px;
}
.action_args_section {
display: block;
float:left;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 3px;
width:300px;
border: 1px solid red;
}
.action_output_section {
display: block;
float:left;
width: 150px;
vertical-align: top;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 3px;
border: 1px solid blue;
}
see the sample solution here in jsfiddle link
using this css:
.parent{
position:fixed;
background-color:blue;
height:auto;
width:auto;
}
.child1{width:200px;background-color:black;height:200px;float:left;}
.child2{width:200px;background-color:red;height:200px; float:left;}
if it is not what you're looking for,you can edit your css here then we can help
.parent{
float: left;
posetion: absolute;
background-color: yellow;
width:auto;
height: auto;
}
.parent div{
float: left;
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
<div class="parent">
<div class="child1">this</div>
<div class="child2">this</div>
</div>
Here's The Code You Need :)
Related
My code:
#Parent {
border-radius: 8px;
background-color:#cccdce;
width:70%;
height:500px;
float:left;
}
#child {
padding:15px;
border-radius: 8px;
background-color:blue;
width:100%;
height:20px;
float:left;
}
<div id="Parent">
<div id="child">
<div>aaaa</div>
</div>
</div>
What I now have is:
I want to know why padding is not working? Isn't padding is supposed to set the space between parent and child element? Why it is not working and overlapping?
I want to do this:
use flexbox and remove floats, and FYI your padding needed to be set in parent not child
#Parent {
border-radius: 8px;
background-color: #cccdce;
width: 70%;
height: 500px;
display:flex;
padding: 15px;
}
#child {
padding: inherit;
border-radius: 16px;
background-color: blue;
height: 20px;
flex:1
}
<div id="Parent">
<div id="child">
aaaa
</div>
</div>
Check this out.
#Parent {
border-radius: 8px;
background-color: black;
width: 70%;
height: 500px;
padding: 15px;
}
#child {
border-radius: 8px;
background-color: white;
padding: 15px;
height: 470px;
}
#grand {
border-radius: 8px;
background-color: blue;
width: 100%;
height: 20px;
}
<div id="Parent">
<div id="child">
<div id="grand">aaaa</div>
</div>
</div>
It would help if you give padding to the right element. Right now you are assigning 15px padding to the child. That's the reason why there is 15px space between the text and the child. If you add a padding to the parent-id, you create "space between parent and child element":
#Parent {
padding: 15px;
}
You can move your padding to the parent and remove the floats. This will give you the expected result.
https://jsbin.com/dazugonoli/1/edit?html,css,output
How would you guys add border to inline-block div? Imagine I'm doing a calendar, the border seem repeated and not equal on each side of the box.
#parent{
width: 400px;
}
#parent > div{
display: inline-block;
width:50px;
height:50px;
line-height:50px;
background:cyan;
border:1px solid;
text-align:center;
}
<div id="parent">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>
The simplest solution is to use outline instead of border
#parent > div{
display: inline-block;
width:50px;
height:50px;
line-height:50px;
background:cyan;
outline: 1px solid;
text-align:center;
}
<div id="parent"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>
Add a negative margin to the elements
#parent {
width: 400px;
}
#parent>div {
margin: -1px 0 0 -1px;
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
background: cyan;
border: 1px solid;
text-align: center;
}
<div id="parent">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>
You could add a negative margin to the top and left (or right and bottom) sides:
margin: -1px 0 0 -1px;
Works if the last line contains the same or less elements than the previous lines. And also when you know the number of elements in one line - you do not use the wrapping.
#parent > div{
display: flex;
}
#parent > div > div{
display: flex;
width:50px;
height:50px;
line-height:50px;
background:cyan;
justify-content:center;
align-items: center;
border-bottom:1px solid;
border-right:1px solid;
}
#parent > div:first-child > div {
border-top: 1px solid;
}
#parent > div > div:first-child {
border-left: 1px solid;
}
<div id="parent">
<div>
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div></div>
<div><div>8</div><div>9</div><div>10</div></div>
</div>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
when I use display = inline-block to my div, there is a gap between these 2 boxes. can anyone tell me why it is like this, and how can I remove the gap?
* {
margin: 0;
padding: 0;
}
.first {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
}
.second {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
}
<div class="first"></div>
<div class="second"></div>
Use float: left;
* {
margin: 0;
padding: 0;
}
.first {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block; float:left
}
.second {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;float:left
}
set font-size: 0 for parent element.
.parent-element { /* apply to the parent element */
font-size: 0;
}
.first, .second {
font-size: 13px; /* default value, change as per your need */
}
Change your html like blow
other way add Comment like blow
* {
margin: 0;
padding: 0;
}
.first {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
}
.second {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
}
<div class="first"></div><div class="second"></div>
<div class="first"></div><!--
--><div class="second"></div>
#Chao Wang for removing that gap you have to use left float in bot the
div
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.first {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
float:left;
}
.second {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
float:left;
}
</style>
<div class="first"></div>
<div class="second"></div>
It will resolve your problem (y)
The "inline-block" elements has this space because of font size of the parent.
Here you can find more details and ways how to remove the space. One of the easiest is this to add a div parent with font-size=0:
<div style="font-size: 0;">
<div class="first"></div>
<div class="second"></div>
</div>
This happen beacause it use line height
.inline-parent{
display:inline-block;
width:100%;
line-height:0;
font-size:0;
}
.inline1{
display:inline-block;
width:50%;
background:#333;
line-height:1;
font-size:15px;
}
.inline2{
display:inline-block;
width:50%;
background:#999;
line-height:1;
font-size:15px;
}
<div class="inline-parent">
<div class="inline1">
text text
</div>
<div class="inline2">
text text
</div>
</div>
It is all because of line-height and font-size
I'm stuck here with an easy css problem:
The problem is to align "World" text inside the div element at the bottom right.
Here is a fiddle:
http://fiddle.jshell.net/0p6w3x14/2/
<div id="container">
<div id="tableElement">
<table> <!-- this table needs to be here, it's containing more info -->
<tr>
<td>
Hello
</td>
</tr>
</table>
</div>
<div id="element">
World
</div>
</div>
#container
{
width: 200px;
border: 1px solid black;
}
#tableElement
{
border: 1px solid black;
display: inline-block;
}
table
{
border: 1px solid red;
height: 100px;
}
#element
{
display: inline-block;
float: right;
border: 1px solid green;
}
Update your css like this:
#container
{
width: 200px;
border: 1px solid black;
position:relative; // add this line
}
#element
{
display: inline-block;
position:absolute; //add this line
bottom:0; //add this line
right:0; //add this line
border: 1px solid green;
}
and remove float:right
Working fiddle here
Check this Fiddle.
I didn't use
float: right
and
display: inline-block
But instead I set a defined width, set its Left property to 100% and then use margin to adapt it to the container
#element{
width: 45px;
top:100%;
left: 100%;
margin-left: -45px;
}
This could be simply done by giving #element the styles position:absolute;, bottom:0; and right:0. And then giving #container the style position:relative; like this:
#container
{
width: 200px;
border: 1px solid black;
position:relative; // Parent needs relative positioning if child will have absolute positioning
}
#element
{
border: 1px solid green;
position:absolute;
bottom:0;
right:0;
}
JSFiddle Demo
See this fiddle
JSFiddle
CSS:
.containers {
width:100%;
height:auto;
padding:10px;
margin-bottom:0px;
}
#id4 {
float:right;
margin-right:0;
display:inline;
border:5px solid red;
}
#id5 {
text-align:center;
border:5px solid red;
}
HTML:
<div class='containers'>
<div id='id4'>
margin-right:10px;
</div>
<div id='id5'>
center-text;
</div>
In this fiddle I want center-text to be center of the page, not at the center between left-border and float element.
The below is one possible option by adding position: absolute; right: 10px; to the id4 div. This will make the div always stay at 10px from the right margin. But it has to be noted that the element is no longer a float element.
Note: The texts would overlap if the result window is shrunk beyond a certain level. I will update the answer if and when I manage to find a fix for that.
.containers {
width: 100%;
height: auto;
padding: 10px;
margin-bottom: 0px;
text-align: center;
box-sizing: border-box;
}
#id4 {
display: inline-block;
position: absolute;
right: 10px;
border: 5px solid red;
}
#id5 {
display: inline-block;
border: 5px solid red;
}
.containers {
width:100%;
height:auto;
padding:10px;
margin-bottom:0px;
text-align:center;
}
#id4 {
float:right;
margin-right:0;
display:inline;
border:5px solid red;
}
#id5 {
margin: 0 auto;
display:inline-block;
border:5px solid red;
}
DEMO