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;
}
Related
Is there any way to make the content to flow to left/right instead of down while the container doesn't have enough space for it in CSS?
.container1 {
width: 70%;
float: left;
}
.container2 {
width: 30%;
float: left;
}
.content {
width: 50%;
float: left;
}
.overflowContent {
width: 20%;
float: left;
}
/* You can add background colors to see where every part is */
<div class="container1">
<div class="content">First half</div>
<div class="content">Second half</div>
<div class="overflowContent">Overflow</div>
</div>
<div class="container2"></div>
I want a way that makes the overflow part go on the right side of the container instead of below it.(i want the third part to be displayed on/over the container 2)
My idea was to add something to a link with [ display : hidden ] that only shows up [ display : block ] on the right side of the link on the other parts of the website while we hover on the link.
Add a div inside the container that will hold the overflowing content, and apply overflow-x: auto to the container.
The flexbox code is just a friendly suggestion, much easier to work with than floats for layout.
* { box-sizing: border-box; }
.container {
width: 70%;
border: 5px solid red;
overflow-x: auto; /* this causes anything inside that is wider to overflow horizontally */
}
.inner {
display: flex;
}
.content {
flex: 0 0 50%;
padding: 20px;
background: papayawhip;
}
.overflowContent {
flex: 0 0 20%;
padding: 20px;
background: dodgerblue;
}
<div class="container">
<div class="inner">
<div class="content">First half</div>
<div class="content">Second half</div>
<div class="overflowContent">Overflow</div>
</div>
</div>
You can do this considering inline-block and white-space:nowrap. Don't forget to reset the whitespace between inline element (I used the font-size trick here)
.container1 {
width: 70%;
display:inline-block;
outline:1px solid red;
}
.container2 {
width: 30%;
display:inline-block;
outline:1px solid green;
}
.content {
width: 50%;
display:inline-block;
font-size:initial;
}
.overflowContent {
display:inline-block;
font-size:initial;
}
body {
font-size:0;
white-space:nowrap;
}
<div class="container1">
<div class="content">First half</div>
<div class="content">Second half</div>
<div class="overflowContent">Overflow</div>
</div>
<div class="container2"></div>
I created a div based table. I'm trying to take a image, put it in top left table cell and make it responsive. I've made it responsive, but its not in the table cell I want it to be. Any help?
JSFiddle:
https://jsfiddle.net/benjones337/3c4fkb78/18/
HTML
<div class="hmTable">
<div class="hmTableRow">
<div class="hmTableCell"><p class="rspimg1"></p></div>
<div class="hmTableCell"><p class="rspimg2"></p></div>
</div>
<div class="hmTableRow">
<div class="hmTableCell">textholder</div>
<div class="hmTableCell">textholder</div>
</div>
</div>
CSS
.hmTable {
margin: 0 auto; /* or margin: 0 auto 0 auto */
display: table;
width: 50%;
}
.hmTableRow {
display: table-row;
}
.hmTableCell, .hmTableHead {
display: table-cell;
width: 50%;
height:100%;
border: 1px solid #999999;
position:relative;
}
.hmTableBody {
display: table-row-group;
}
.rspimg1{
background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/39/Red_triangle_with_thick_white_border.svg/1152px-Red_triangle_with_thick_white_border.svg.png");
background-repeat:no-repeat;
background-size:100% 100%;
width:100%;
height:100%;
position:absolute;
}
.rspnimg2{
}
When using background-image, the div doesn't grow with the image, so you will need to give it a height/width, either to the cell or the image div (btw, I changed your p to div, as p is for text rather than image).
Below sample I'm pretty sure look close to what you are after, and If not, drop me a comment and I'll fix it for you.
html, body {
margin: 0;
height: 100%;
}
.hmTable {
margin: 0 auto;
display: table;
width: 50%;
height: 30%;
}
.hmTableRow {
display: table-row;
height: 10%;
}
.hmTableCell, .hmTableHead {
display: table-cell;
width: 50%;
height:100%;
border: 1px solid #999999;
}
.rspimg1{
background: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/39/Red_triangle_with_thick_white_border.svg/1152px-Red_triangle_with_thick_white_border.svg.png") center no-repeat;
background-size: contain;
width:100%;
height:100%;
}
.rspnimg2{
}
<div class="hmTable">
<div class="hmTableRow">
<div class="hmTableCell">
<div class="rspimg1">triangle</div>
</div>
<div class="hmTableCell">
<div class="rspimg2">square</div>
</div>
</div>
<div class="hmTableRow">
<div class="hmTableCell">textholder</div>
<div class="hmTableCell">textholder</div>
</div>
</div>
Remove position:absolute or add top:0 to .rspimg1.
Result
beginning from a layout to two column where column-left was fixed and column-right was liquid i have need to add a third column of widht fixed. I have this code:
<did id="#container">
<div id="#col1"> left fixed 15em </div>
<div id="#col2"> center liquid </div>
<div id="#col3"> right fixed 15em </div>
</div>
With this css:
#container {
background-color: #ffffff;
height: auto;
overflow: hidden;
}
#col1 {
float: left;
margin: 1em;
padding: 0.5em;
width: 15em;
}
#col2 {
float: none;
width: auto;
overflow: hidden;
margin: 1em;
padding: 0.5em;
}
#col3 {
float: right;
margin: 1em;
padding: 0.5em;
width: 15em;
}
The result is that third column it is located below the second column to right. How i can fix this problem?
The final result should to be a layout to three column where left and right column are fixed and central column is liquid.
Thank very much.
I like to use CSS tables for these layouts:
Note that you shouldn't use # in the id attribute.
#container {
width: 100%;
display: table;
}
#container>div {
display: table-cell;
}
#col1 {
background: lightblue;
padding: 0.5em;
width: 15em;
}
#col2 {
background: lightyellow;
padding: 0.5em;
}
#col3 {
background: lightgreen;
padding: 0.5em;
width: 15em;
}
<div id="container">
<div id="col1"> left fixed 15em </div>
<div id="col2"> center liquid </div>
<div id="col3"> right fixed 15em </div>
</div>
This is what flex boxes were invented for:
#container {
display: flex;
}
#col2 {
flex: 1;
}
#col1,
#col3 {
flex: 0 0 15em;
}
<did id="container">
<div id="col1">left fixed 15em</div>
<div id="col2">center liquid</div>
<div id="col3">right fixed 15em</div>
</div>
Extra Info: This is a very old web layout problem (called the "Holy Grail" of Layouts), see this article for a complete description. Also, see Mozilla's Using Flexible Boxes.
Note: In id properties don't include the # (that's used when selecting by id)
First of all, your html is invalid :
did should be div
id="..." should not contains #
HTML updated:
<div id="container">
<div id="col1"> left fixed 15em </div>
<div id="col2"> center liquid </div>
<div id="col3"> right fixed 15em </div>
</div>
For the CSS, you can change your rule #col2 float: none to float: left
JSFIDDLE: http://jsfiddle.net/ghorg12110/5p175fms/
You could try the following:
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Three column layout</title>
<style>
body { margin: 0; overflow: hidden }
#V { position: absolute; top: 1em; left: 1em; width: 15em; border: 1px solid red; padding: .5em }
#W { position: absolute; top: 1em; right: 1em; bottom: 0; left: 1em; margin: 0 17em }
#X { border: 1px solid blue; padding: .5em }
#Y { position: absolute; top: 1em; right: 1em; width: 15em; border: 1px solid green; padding: .5em }
</style>
<div id=V>
Left content
</div>
<div id=W>
<div id=X>
Middle content
</div>
</div>
<div id=Y>
Right content
</div>
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 want to have an image centered within each DIV that is floating left within a larger DIV.
In the following example, I want the gray boxes ("assetInfoBody") to be centered within the green boxes ("assetBox"). What else can I try here beside text-align:center and margin:auto?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#assets {
background-color: orange;
padding: 5px;
width: 100%;
height: 100%;
}
.assetbox {
background-color: lightgreen;
float: left;
width: 100px;
margin-right: 5px;
text-align: center;
}
.assetInfoBody {
background-color: grey;
position: relative;
width: 80px;
text-align: center;
}
.centeredItem {
margin-left: auto;
margin-right: auto;
top: 0px;
}
</style>
</head>
<body>
<div id="assets">
<div class="assetbox">
<div class="assetInfoBody">
<div class="centeredItem">
<img src="images/box.png"/>
</div>
</div>
</div>
<div class="assetbox">
<div class="assetInfoBody">
<div class="centeredItem">
<img src="images/box.png"/>
</div>
</div>
</div>
<div class="assetbox">
<div class="assetInfoBody">
<div class="centeredItem">
<img src="images/box.png"/>
</div>
</div>
</div>
</div>
</body>
</html>
See this example for a reference to how you could achieve this. As your class .assetInfoBody class has a set width you can align the .centeredItem by applying the rule margin:0 auto to it. By also applying text-align:center to .centeredItem you're able to always keep the image centered within it.
probably you want a css like that:
#assets {
background-color: orange;
padding: 5px;
width: 100%;
}
.assetbox {
background-color: lightgreen;
display: inline-block;
width: 100px;
margin-right: 5px;
}
.assetInfoBody {
background-color: grey;
margin: 0 auto !important;
width: 80px;
}
.centeredItem {
margin-left: auto;
margin-right: auto;
}