So, I have three divs:
<div class="takeremaining">
<div class="centeredcontent">
This is my centered content
</div>
</div>
<div class="dynamicallyallocated">
This is my dynamic content
</div>
I'd like the rightmost div dynamicallyallocated to be dynamically sized based on the content using display: inline-block; and the other div takeremaining to take the remaining space in the parent div. I've tried this with my css:
.takeremaining {
display: inline-block;
width: 100%;
float: left;
background-color: #0000ff;
}
.centeredcontent {
display: table;
margin: 0 auto;
background-color: #00ffff;
}
.dynamicallyallocated {
display: inline-block;
float: right;
background-color: #00ff00
}
but, as you can see by this JSFiddle demo, the div dynamicallyallocated is bumped beneath takeremaining. I believe this is because of width: 100%; in takeremaining, but I'm not sure how to give it a dynamic width based on the conditional width of dynamicallyallocated. What would you suggest?
Here is a solution for you.
.container {
display: table;
width: 100%;
}
.takeremaining {
display: table-cell;
width: 100%;
text-align: center;
background-color: #0000ff;
}
.centeredcontent {
display: inline-block;
background-color: #00ffff;
}
.dynamicallyallocated {
display: table-cell;
width: 0;
background-color: #00ff00;
white-space: nowrap
}
<div class="container">
<div class="takeremaining">
<div class="centeredcontent">
This is my centered content
</div>
</div>
<div class="dynamicallyallocated">
This is my dynamic content
</div>
</div>
Related
I want three divisions side bu side with the middle explanding and the other two positioned at the ends. So here is what I tried. The padding rule disturbs the positioning but its necessary. I want approach which works in all major browsers(So ruling out flexbox)
.Button {
width: 80%; /*Useless Rule*/
}
.Button > .left {
float: left;
background-color: blue;
padding: 5px;
}
.Button > .right {
float: right;
background-color: red;
padding: 5px;
}
.Button> .middle {
width: 100%;
background-color: green;
padding: 5px;
}
<html>
<body>
<div class="Button">
<div class="left"><</div>
<div class="right">></div>
<div class="middle">Middle</div>
</div>
</body>
</html>
I like to use the display: table on the parent, and the display: table-cell on the children. Then give the first and third child a width of 1px. It will then be only as width as its content.
.button {
display: table;
width: 100%;
}
.button>div {
display: table-cell;
text-align: center;
background: lightblue;
}
.button>div:nth-child(1),
.button>div:nth-child(3) {
width: 1px;
background: lightgreen;
}
<div class="button">
<div><</div>
<div>Middle</div>
<div>></div>
</div>
I am trying to place two img tags onto of each other but have them both centered.
Here is where im trying to do it: http://nathanturnbull.me/scrolldiv/home.html
The Html:
<div id="divs" class="div1">
<div class="textcont">
<img class="imglogo" src="gpk.gif" alt="GPK NET">
<div class="textcont" >
<img class="imgbutton" src="gpk.gif">
</div>
</div>
</div>
The css:
#divs, #div4 {
height: 100%;
width: 100%;
overflow: hidden;
background-size: cover;
font-family: 'Cousine';
font-size: 80px;
color: #ffffff;
text-align: center;
}
.div1 {
display: table;
}
.textcont {
display: table-cell;
vertical-align: middle;
background-color: transparent;
}
.imgbutton {
height: 42px;
width: 84px;
}
.container {
text-align: center;
}
.container IMG {
display: inline; /* browser default */
}
or
IMG {
display: block;
margin: 0 auto;
}
Your images should be horizontally centred inside their container.
Remove the display:table-cell; statement from your .textcont CSS class.
See example.
I want to make dynamic width columns inside of dynamic width div. Everything seems to be working just fine, but if I want to make the sum of column widths 100%, the third column jumps down even though there is still space. And I can't get rid of the spacing after each column.
Maybe some of you might know why?
Here is my fiddle!
http://jsfiddle.net/vMe5L/
My code:
<style>
.content { width: 300px; height: 200px; background-color: gray; }
.left { width: 20%; display: inline-table; height: 100%; background-color: red; }
.middle { width: 30%; display: inline-table; height: 100%; background-color: blue; }
.right { width: 47%; display: inline-table; height: 100%; background-color: yellow; }
</style>
<div class="content">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
Thanks in advance, you guys are amazing.
Either float the elements, or remove the whitespace in between. On inline elements (which includes styling them to display: inline-table or inline-block), whitespace is shown too, even if it is collapsed to a single space. So:
<div class="content"><div class="left"></div><div class="middle"></div><div class="right"></div></div>
works fine.
Better to use table and table-cell display.
Demo: http://jsfiddle.net/abhitalks/vMe5L/5/
CSS:
div { box-sizing: border-box; }
.content { display: table; width: 300px; height: 200px; background-color: gray; }
.left { width: 20%; display: table-cell; height: 100%; background-color: red; }
.middle { width: 30%; display: table-cell; height: 100%; background-color: blue; }
.right { width: 50%; display: table-cell; height: 100%; background-color: yellow; }
Update:
If you want to stick to inline-table, then get rid of the white spaces. The best way would to introduce comments:
<div class="content">
<div class="left"></div><!--
--><div class="middle"></div><!--
--><div class="right"></div>
</div>
Try this out:
Fiddle
Changes made,
added css display:table to outer class content, and inner classes changed to display:table-cell;
I feel like this is such an idiotic question, and the little things in css always get me. Anyway, I have a design, and I'm trying to do 2 columns. One (which is a sidebar of 300px) which is at the right, and the other column should fill the remaining space.
As you can see the sidebar is put under the div on the left.
HTML:
<div class="wfix"><div class="col-fix">
<div class="col-lg">
<!--
<div id="block">
<bh>Homepage</bh>
<detail id="test">Loading...</detail>
</div>
-->
</div>
<div class="col-side">
</div>
</div></div>
CSS:
.wfix{ margin-left: 5em; margin-right: 5em; }
.col-fix {
display: table;
width: 100%;
table-layout: fixed;
}
.col-lg, .col-side {
color: #999;
margin: 0;
padding: 0;
}
.col-lg {
margin-left: 0;
margin-right: 300px;
padding-top: 0px;
display: block;
vertical-align: top;
background-color: blue;
min-height: 500px;
}
.col-side {
width: 300px;
float: right;
padding-top: 0px;
display: block;
vertical-align: top;
background-color: red;
min-height: 500px;
}
thanks for any help, Jake.
Floating elements should appear first in the html:
<div class="wfix">
<div class="col-fix">
<div class="col-side"></div>
<div class="col-lg"></div>
</div>
</div>
Demo
What I want to do is have a <div> with a container class and a fixed width, holding a <div> with the block class to prevent other content encroaching on any uneven blank space, then two columns (<div>'s) side-by-side inside the block, and to be 50% of the width of the block.
When I create this, I get what appears to be a margin after the first block, which I do not want. I want the block to pack up tight, no margins.
I have an example here of what I have so far, and here if the code:
<html>
<head>
<title>Columns</title>
<style>
div {
margin: 0;
padding: 0;
}
.container {
background: #DDD;
width: 1200px;
margin: 0 auto;
padding: 2% 0;
}
.block {
background: #555;
width: 100%;
display: block;
}
.col {
width: 49%;
display: inline-block;
background: #333;
}
</style>
</head>
<body>
<div class="container">
<div class="block">
<div class="col left">
<h1>Left</h1>
</div>
<div class="col right">
<h1>Right</h1>
</div>
</div>
</div>
</body>
</html>
Your problem is being causes by inline-block, using this makes a space appear inbetween.
Try using float:left to get around this:
See on jsFiddle
.col {
width: 50%;
float: left;
box-sizing: border-box;
background: #333;
}
Note that I added, box-sizing:border-box; this means when you use padding it will be included in the width, not on top of it. Effectively enabling the use of it without an extra inner div.
Remember to include a clear fix afterwards also to "clear" the floats.
CSS
.clear {
clear:both;
}
HTML
<div class="block">
<div class="col left">
<h1>Left</h1>
</div>
<div class="col right">
<h1>Right</h1>
</div>
<div class="clear"></div>
</div>
Try replacing these classes:
.block {
background: none repeat scroll 0 0 #555555;
display: block;
overflow: auto;
width: 100%;
}
.col {
width: 49%;
float: left;
background: #333;
}
.container {
background: #DDD;
width: 900px;
margin: 0 auto;
padding: 30px 30px 30px 30px;
}
.block {
background: #555;
width: 100%;
display: block;
}
.block:after {
content: "";
display: table;
clear: both;
}
.col {
width: 50%;
float: left;
background: #333;
}