I'm trying to set up automatically resizable divs based on the content that will go into them. The code is kind of hackey but I was wondering if anyone could provide me some suggestions on getting it to work properly.
CSS:
.container { min-width:748px; margin-left:180px; margin-right:3px; border: 1px solid #210B61; border-top:none; }
.first_div { width:233px; background:#A9BCF5; border: 1px solid #210B61; float:left; overflow:auto; }
.second_div { background:#E0ECF8; overflow:hidden; }
.label_for_first_div { width:100px; text-align:left margin-left:5px; }
HTML:
<div class="container">
<div class="first_div">
<div class="label_for_first_div">
</div>
</div>
<div class="second_div">
</div>
</div>
The trouble with this is the first_div will not display inside the container without the use of the label_for_first_div. Getting the first div to fit the height of that container has been troubling too. Would using display:table; be my best option?
you can use calc() to accomplish this
.container {
min-width:748px;
margin-right:3px;
border: 1px solid #210B61;
border-top:none;
overflow: hidden;
}
.first_div {
width:233px;
background:#A9BCF5;
float:left;
}
.second_div {
width: calc(100% - 233px);
background:red;
float: left;
}
EXAMPLE 1
OR
You can do this by setting the divs to display: table-cell and the parent to display: table
.container {
display: table;
min-width:748px;
margin-right:3px;
border: 1px solid #210B61;
border-top:none;
}
.first_div {
display: table-cell;
width:233px;
background:#A9BCF5;
}
.second_div {
display: table-cell;
background:red;
}
EXAMPLE 2
Related
My HTML
<div id="wrapper">
<div id="div1">The two divs are</div>
<div id="div2">next to each other.</div>
</div>
My CSS
#wrapper {
border: 1px solid blue;
}
#div1 {
display: inline-block;
width:49%;
height:120px;
border: 1px solid red;
}
#div2 {
display: inline-block;
width:49%;
height:160px;
border: 1px solid green;
}
A JSFiddle
So, when as you can see the width of each div is 49%, that's the only way I'm getting it to work. If you set the width of each to 50%, the divs aren't displayed next to each other anymore... Why is that?
Because of two things
Border size so you need to change box-sizing to border-box
White space on inline-block elements
* {
box-sizing: border-box;
}
#wrapper {
border: 1px solid blue;
}
#div1 {
display: inline-block;
width: 50%;
height: 120px;
border: 1px solid red;
}
#div2 {
display: inline-block;
width: 50%;
height: 160px;
border: 1px solid green;
}
<div id="wrapper">
<div id="div1">The two divs are</div><div id="div2">next to each other.</div>
</div>
You need to remove the line break between the <div> tags and box-sizing:border-box;
The two divs arenext to each other.
Another approach would be to use float
#wrapper {
border: 1px solid blue;box-sizing:border-box;
}
#div1 {
float:left;
width:50%;
height:120px;
background:green;
box-sizing:border-box;
border:1px solid #909090;
}
#div2 {
float:left;
width:50%;
height:160px;
background:green;
box-sizing:border-box;
border:1px solid #909090;
}
The other option is to use Flex.
#wrapper {
border: 1px solid blue;
display: flex;
}
#div1 {
width:50%;
height:120px;
border: 1px solid red;
}
#div2 {
width:50%;
height:160px;
border: 1px solid green;
}
This is because you have added a border of 1px to wrapper. Your border with take 2px of total width of your page.
If you wanna keep the border and still keep the width of each div as 50%, you can refer to #NenadVracar 's answer
Another option is to use calc() and calculate the width to be 50% - 2px. I'm just listing that as an option #Nenad Vracar has the right answer
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
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 :)
I'm trying to make the div have same height so i used display table , problem that i having is the width will grow.
As an example try adding content in the tableright , when it is exceeded the width , it will not break to the next line but it will expand horizontally to the tableleft.
Please Advice.
Below is the sample code
<div id="maintable">
<div id="table-row">
<div id="tableleft></div>
<div id="tableright></div>
</div>
</div>
<style>
#maintable
{display:table;
width:100%;
}
#table-row
{
display:table-row
width:100%;
}
#tableleft
{
width:60%;
display:table-cell;
}
#tableright
{
width:40%;
display:table-cell;
}
</style>
You made few syntax error there.
Further to make sure if one big un spaced word is placed in table-cell i have used "table-layout: fixed;"
check this fiddle: http://jsfiddle.net/5q9K8/17/
The HTML:
<div id="maintable">
<div id="table-row">
<div id="tableleft">lorem</div>
<div id="tableright">ipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsum</div>
</div>
</div>
The Css:
#maintable
{
display:table;
width:100%;
table-layout: fixed;
word-wrap:break-word;
}
#table-row
{
display:table-row;
width:100%;
}
#tableleft
{
width:60%;
display:table-cell;
background: #eef;
}
#tableright
{
width:40%;
display:table-cell;
background: #efe;
}
Add width as accordingly here just an example to show div height equal to table height.
css
.maintable {
width:100%;
display: table;
border: 1px solid blue;
}
.maintable .table-row {
display: table-row;
border: 2px solid black;
}
.maintable .table-row .tableleft, .maintable .table-row .tableright {
display: table-cell;
border: 4px solid red;
}
.tableright {
width: 60%;
}
.tableleft {
width: 40%;
}
DEMO
Final DEMO
I have a div (#wrapper) containing 2 divs standing side by side.
I would like the right-div to be vertically aligned. I tried vertical-align:middle on my main wrapper but it is not working. It is driving me crazy!
Hope someone can help.
http://cssdesk.com/LWFhW
HTML:
<div id="wrapper">
<div id="left-div">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
<div id="right-div">
Here some text...
</div>
</div>
CSS:
#wrapper{
width:400px;
float:left;
height:auto;
border:1px solid purple;}
#left-div{
width:40px;
border:1px solid blue;
float:left;}
#right-div{
width:350px;
border:1px solid red;
float:left;}
ul{
list-style-type: none;
padding:0;
margin:0;}
You'll have no luck with floated elements. They don't obey vertical-align.
You need display:inline-block instead.
http://cssdesk.com/2VMg8
Beware!
Be careful with display: inline-block; as it interprets the white-space between the elements as real white-space. It does not ignores it like display: block does.
I recommend this:
Set the font-size of the containing element to 0 (zero) and reset the font-size to your needed value in the elements like so
ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
ul > li {
font-size: 12px;
}
See a demonstration here: http://codepen.io/HerrSerker/pen/mslay
CSS
#wrapper{
width:400px;
height:auto;
border:1px solid green;
vertical-align: middle;
font-size: 0;
}
#left-div{
width:40px;
border:1px solid blue;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
#right-div{
width:336px;
border:1px solid red;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
You can do this quite easily with display table and display table-cell.
#wrapper {
width: 400px;
float: left;
height: auto;
display: table;
border: 1px solid green;
}
#right-div {
width: 356px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
EDIT: Actually quickly messed around on CSS Desk for you - http://cssdesk.com/RXghg
ANOTHER EDIT: Use Flexbox. This will work but it's pretty outdated - http://www.cssdesk.com/davf5
#wrapper {
display: flex;
align-items: center;
border:1px solid green;
}
#left-div {
border:1px solid blue;
}
#right-div {
border:1px solid red;
}
I realize this is an ancient question however I thought it would be useful to post a solution to the float vertical alignment issue.
By creating a wrapper around the content you want floated, you can then use the ::after or ::before pseudo selectors to vertically align your content within the wrapper. You can adjust the size of that content all you want without it affecting the alignment. The only catch is that the wrapper must fill 100% height of its container.
http://jsfiddle.net/jmdrury/J53SJ/
HTML
<div class="container">
<span class="floater">
<span class="centered">floated</span>
</span>
<h1>some text</h1>
</div>
CSS
div {
border:1px solid red;
height:100px;
width:100%;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
.floater {
float:right;
display:inline-block;
height:100%;
box-sizing: border-box;
}
.centered {
border:1px solid blue;
height: 30px;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
h1 {
margin:0;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
.container:after, .floater:after, .centered:after, h1:after {
height:100%;
content:'';
font-size:0;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
I do my best to avoid using floats... but - when needed, I vertically align to the middle using the following lines:
position: relative;
top: 50%;
transform: translateY(-50%);
A possible solution is to make wrapper div flex with items aligned on center as specified by https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/.
The only downfall of my modifications is you have a set div height...I don't know if that's a problem for you or not.
http://cssdesk.com/kyPhC