I'm trying to put a bunch of divs inside another one, and do something like the way table columns will resize to fit the space available, but in this case if the divs inside get shrunk to a minimum size they will wrap instead.
I have something like
<div style="width: 100%">
<div style="float: left; min-width:30px; padding: 4px">Text 1</div>
<div style="float: left; min-width:30px; padding: 4px">Text 2</div>
<div style="float: left; min-width:30px; padding: 4px">Text 3</div>
<div style="float: left; min-width:30px; padding: 4px">Text 4</div>
<div style="float: left; min-width:30px; padding: 4px">Text 5</div>
</div>
and that does the wrapping correctly, but there doesn't seem to make the inner ones expand when there is room to fit them all on one line. Can this be done now (keeping in mind I have to support browser that don't implement FlexBox yet)?
I am not sure if this is exactly what you want, but you may want to set a percentage based width for the innner elements.
.cell {
width:19%;
}
with your HTML like this:
<div style="width: 100%">
<div class="cell" style="float: left; min-width:30px; padding: 4px">Text 1</div>
...
</div>
Here is a working example
Related
I want to create a page where there are 3 rectangles (in black). The code show this. Now I want to create inside the 2nd horizontal rectangle, 3 vertical rectangles with different sizes(in red). Every and each text should be centered in each rectangle (vertically and horizontally).
How do I insert 3 columns inside the 2nd rectangle and centering all text in this:
<div class="wrap">
<div class="row_wrap">
<div class="head x">
ONE
</div>
</div>
<div class="row_wrap">
<div class="middle x">
TWO
</div>
</div>
<div class="row_wrap">
<div class="bottom x">
THREE
</div>
</div>
</div>
body {font-size:36px; color:green;}
.wrap {display: table; width:100%;}
.row_wrap{display:table-row;}
.x{display:table-cell; vertical-align:middle; text-align:center;}
.head{height:200px; background:#fa4;}
.middle{height:400px; background:#4af;}
.bottom{height:100px; background:#a4f;}
I know this question is old, but it's interesting to know it's possible to solve this using flexbox.
.row, .column{
display: flex;
}
.row{
width: 100%;
height: 10rem;
border: 3px solid black;
flex-flow:
}
.column{
border:3px solid red;
height: 100%;
flex: 1;
}
.column--big{
flex: 2;
}
.center{
justify-content: center;
align-items: center
}
<div class="row center">
<span>Center</span>
</div>
<div class="row center">
<div class="column center">
<span>Center</span>
</div>
<div class="column column--big center">
<span>Center</span>
</div>
<div class="column center">
<span>Center</span>
</div>
</div>
<div class="row center">
<span>Center</span>
</div>
This code could obviously be optimized, but it's a start.
I am trying to create two columns of equal width, the left one containing text and the right one containing an image. I would like the image to resize down to the width of the column if the image width is greater than the column width, but would like the image to keep its original size if the image is less than the column width. I have tried the instructions in this question, but the image, if larger, will consume whatever space it needs, squishing the column on the left containing text. I am wondering if this has to do with how "table-cell" divs behave, or if it is a precedence issue where the browser will accommodate an image before text. My code looks something like this:
<div style="display: table; width:100%;">
<div style="display: table-row;">
<div style="display: table-cell; width: 50%; vertical-align: middle;">
<h1>Header</h1>
<p>Description</p>
</div>
<div style="display: table-cell; width: 50%; vertical-align: middle;">
<img style="max-width: 100%;height:auto;" src="image.jpg">
</div>
</div>
</div>
Also, I am using FireFox as my browser to test. Thanks!
EDIT: I also tried an alternative method to get the same effect using float divs (code below). The problem is I would like the two columns middle-centered, and I cannot get the smaller float div to size to full height in the parent container, so the inner contents are top-aligned. However, the image does resize properly, which backs up my hunch that this problem is related to how "table-cell" divs behave.
<div style="position: relative;">
<div style="float: left; width: 50%;height:100%;background-color:#F00;">
<div style="display: table;height:100%;width:100%;">
<div style="display: table-row;height:100%;width:100%;">
<div style="display: table-cell;height:100%;width:100%;vertical-align:middle;">
<p>content</p>
</div>
</div>
</div>
</div>
<div style="float: left; width: 50%;height:100%;background-color:#F00;">
<div style="display: table;height:100%;width:100%;">
<div style="display: table-row;height:100%;width:100%;">
<div style="display: table-cell;height:100%;width:100%;vertical-align:middle;">
<img style="max-width:100%;height:auto;" src="image.jpg">
</div>
</div>
</div>
</div>
</div>
Code was working fine in Chrome. This seems to be an issue only in Firefox as per this article:
http://www.carsonshold.com/2014/07/css-display-table-cell-child-width-bug-in-firefox-and-ie/
Adding table-layout:fixed; to the div styled display:table; gives the results you're looking for- allowing the image max-width to work and respecting the cell widths.
<div style="display: table; width:100%; table-layout: fixed">
<div style="display: table-row;">
<div style="display: table-cell; width: 50%; vertical-align: middle;">
<h1>Header</h1>
<p>Description</p>
</div>
<div style="display: table-cell; width: 50%; vertical-align: middle;">
<img style="max-width: 100%;height:auto;" src="image.png">
</div>
</div>
</div>
this is the first time, i'm building a totally scalable application with a css layout, when the user resizes the window the fields should shrink and grow accordingly. first i thought, easy, right? but now i'm really scratching my head over the dimensions, cause it seems like the margins are not quite right... i want to have a border-like separator thingy in between all the individual fields...
my code is this:
<div style='background-color:#000000;width:100%;height:100%;'>
<div style='width:100%;height:66%;margin-bottom:1%;'>
<div style='float:left; width:19%;height:100%;margin-right:1%;' class='app_14_concept_block'>keypartners</div>
<div style='float:left; width:19%;height:100%;margin-right:1%;'>
<div style='height:49%;margin-bottom:6%' class='app_14_concept_block'>key activities</div>
<div style='height:49%;' class='app_14_concept_block'>key resources</div>
</div>
<div style='float:left; width:19%; height:100%;margin-right:1%;' class='app_14_concept_block'>value propositions</div>
<div style='float:left; width:19%; height:100%;margin-right:1%;'>
<div style='height:49%;margin-bottom:6%' class='app_14_concept_block'>customer relationship</div>
<div style='height:49%;' class='app_14_concept_block'>channels</div>
</div>
<div style='float:left; width:19%; height:100%;padding-right:1%' class='app_14_concept_block'>customer segments</div>
</div>
<div style='width:100%;height:33%;'>
<div style='float:left; width:49%; height:100%;margin-right:1%;' class='app_14_concept_block'>cost</div>
<div style='float:left; width:50%; height:100%;' class='app_14_concept_block'>revenue</div>
</div>
</div>
the css is this:
.app_14_concept_block{
background-color:#ffffff;
}
.app_14_concept_block:hover{
background-color:#eeeeee;
}
and this is what it looks like at the moment (the blue thingy there is part of my app viewer layout that would open comments) - my main concern is the added empty(black) space on the right, at the end of the rows:
jsfiddle here: http://jsfiddle.net/gbMZy/51/
i also tried setting the "customer segments" width to 20% - sadly to no avail:
screenshot:
jsfiddle: http://jsfiddle.net/gbMZy/52/
Maybe this solution Footer Items Expanding with Viewport Evenly could also work in your case.
Percentage width won't play well together with borders or margins.
A possible workaround is to have wrapper containers with full 20% / 50% width and then elements with border etc. inside them. This should help to avoid flickering and random spacings.
So, in your case this could look something like: http://jsfiddle.net/qC4JV/1/
HTML:
<div class="top">
<div class="cell">
<div class="border right"></div>
<div class="border bottom"></div>
<p>value</p>
</div>
<div class="cell">
<div class="border right"></div>
<div class="border bottom"></div>
<p>value</p>
</div>
<div class="cell">
<div class="border right"></div>
<div class="border bottom"></div>
<p>value</p>
</div>
<div class="cell">
<div class="border right"></div>
<div class="border bottom"></div>
<p>value</p>
</div>
<div class="cell">
<div class="border bottom"></div>
<p>value</p>
</div>
</div>
<div class="bottom">
<div class="cell">
<div class="border right"></div>
<p>value</p>
</div>
<div class="cell">
<p>value</p>
</div>
</div>
CSS:
body, html{
height: 100%;
background: #000;
}
.top{
height: 60%;
}
.bottom{
height: 40%;
}
.cell{
float: left;
height: 100%;
background: #fff;
position: relative;
}
.cell .border.right{
position: absolute;
right: 0;
top: 0;
width: 10px;
height: 100%;
background: #000;
}
.cell .border.bottom{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 10px;
background: #000;
}
.top .cell{
width: 20%;
}
.bottom .cell{
width: 50%;
}
Set the font-size explicitly in the first div and then use 'em' to adjust the row margins.
But I'm unsure whether there will be scalability issues or not ..
When using percentages in this manner, the way browsers round values to obtain discrete pixel values will often result in remainders. if 1% of the total width of the viewport is not an exact number of pixels, the browser will round up or down, resulting in a few pixels too many or too few, hence the jittery divs and unequal margins.
Even Twitter's Bootstrap framework, a very well developed system, suffers from the same issues when using its fluid grid system.
I hate to say it, but if you absolutely have to create a layout like this, and the unreliable element dimensions are not acceptable, using a table may be the way to go.
On the other hand, if you go with white 'borders' instead of black, the margin jitteriness will be less noticeable.
Your HTML is painful to read. You should really separate styles out into CSS instead of writing everything inline like that, it's harder to read/debug and makes it very easy to make a mistake.
Here is a little bit better of a solution: http://jsfiddle.net/gbMZy/51/
Percentage always will be calculated in round values manner on browser and will be justified according to total width of body or parent element wrap area/width. These dimensions will be assign after calculating inner and outer pixels width given to sub elements or padding styles as well as border given on element with specified size of pixels too.
HTML:
<div class="top">
<div class="cell">
<div class="border right">
</div>
<div class="border bottom">
</div>
<p>
Top Block-1
</p>
</div>
<div class="cell">
<div class="border right">
</div>
<div class="border bottom">
</div>
<p>
Top Block-2
</p>
</div>
<div class="cell">
<div class="border right">
</div>
<div class="border bottom">
</div>
<p>
Top Block-1
</p>
</div>
<div class="cell">
<div class="border right">
</div>
<div class="border bottom">
</div>
<p>
Top Block-3
</p>
</div>
<div class="cell">
<div class="border bottom">
</div>
<p>
Top Block-4
</p>
</div>
</div>
<div class="bottom">
<div class="cell">
<div class="border right">
</div>
<p>
Bottom Block-1
</p>
</div>
<div class="cell">
<p>
Bottom Block-2
</p>
</div>
</div>
CSS Styles:
body, html{
height: 100%;
background: #3355A9;
}
.top{
height: 60%;
}
.bottom{
height: 40%;
}
.cell{
float: left;
height: 100%;
background: #ffca77;
position: relative;
text-align:center;
font-weight:bold;
}
.cell p{
padding:10px;
}
.cell .border.right{
position: absolute;
right: 0;
top: 0;
width: 10px;
height: 100%;
background: #3355A9;
}
.cell .border.bottom{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 10px;
background: #3355A9;
}
.top .cell{
width: 20%;
}
.bottom .cell{
width: 50%;
}
Try this solution on codebins: http://codebins.com/codes/home/4ldqpbt
So, you might be found a better solution because it has better user interface and clear vision to display exact result as we want.
I'm looking for the best way to create a block of left-aligned text and a block of right aligned text inside a div.
This is an image of what I want it to look like
I've thought about creating three divs with one in the middle acting as a buffer, but it doesn't seem to work. I'd need to hard code the length of the middle div, and this doesn't seem like the best approach
<div style="width: 500px;">
<div style="float: left;">left aligned text</div>
<div style="float: left; width: 100%" > </div>
<div style="float: left;">right aligned text </div>
</div>
Why not use the "text-align" property on the second div?
<div style="width: 500px;">
<div style="float: left;">left aligned text</div>
<div style="float: right; text-align: right;">right aligned text </div>
</div>
EDIT: You don't need a middle DIV for a spacing. You can simple use a percentage width for the two other DIVs and using float left and right you have a "buffer":
<div style="width: 500px;">
<div style="float: left; width: 45%;">left aligned text</div>
<div style="float: right; text-align: right; width: 45%;">right aligned text </div>
</div>
try this -
<div style="width: 500px;">
<div style="float:left">left aligned text</div>
<div style="text-align: right;">right aligned text </div>
</div>
I have a pretty common layout issue that I have traditionally used a table to solve, but would like some advice on getting it done with CSS. I have 3 images that makeup a 'container'. The left and right images are usually just shown using tags, and the center image is displayed as a 'background-image" with my content over it, so that the content appears to be in the container. I'm sure you've seen/used this a million times:
<table width="100" cellpadding="0"><tr>
<td width="50"><img src="myleftimage" /></td>
<td style="background: url('mymiddleimage');">Content goes here...</td>
<td width="50"><img src="myrightimage" /></td>
</tr></table>
The nice thing about this is that the width of the table is always the width of the browser (or parent) and the middle column where the content is dynamically sizes to take up the remaining space between the left/right images.
What I want to is recreate this using CSS, with as little hard coded info as possible. So something like this:
<div style="float:left; width:100%">
<div style="width: 50px;float:left;"><img src="myleftimage" /></div>
<div style="background: url('mymiddleimage');float:left;width:???">Content goes here...</div>
<div style="width: 50px;float:left;"><img src="myrightimage" /></div>
</div>
This works great accept for the middle div -how do I set the width? Right now I can hard-code it to be, say, 92%, etc. But want I want is for it to auto-fill the space. Can it be done using only CSS?
try
<div style="width:100%;">
<div style="width:50px; float: left;"><img src="myleftimage" /></div>
<div style="width:50px; float: right;"><img src="myrightimage" /></div>
<div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
</div>
or
<div style="width:100%; border:2px solid #dadada;">
<div style="width:50px; float: left;"><img src="myleftimage" /></div>
<div style="width:50px; float: right;"><img src="myrightimage" /></div>
<div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
<div style="clear:both"></div>
</div>
This will do what you want. Fixed sides with 50px-width, and the content fills the remaining area.
<div style="width:100%;">
<div style="width: 50px; float: left;">Left Side</div>
<div style="width: 50px; float: right;">Right Side</div>
<div style="margin-left: 50px; margin-right: 50px;">Content Goes Here</div>
</div>
Or, if you know the width of the two "side" images and don't want to deal with floats:
<div class="container">
<div class="left-panel"><img src="myleftimage" /></div>
<div class="center-panel">Content goes here...</div>
<div class="right-panel"><img src="myrightimage" /></div>
</div>
CSS:
.container {
position:relative;
padding-left:50px;
padding-right:50px;
}
.container .left-panel {
width: 50px;
position:absolute;
left:0px;
top:0px;
}
.container .right-panel {
width: 50px;
position:absolute;
right:0px;
top:0px;
}
.container .center-panel {
background: url('mymiddleimage');
}
Notes:
Position:relative on the parent div is used to make absolutely positioned children position themselves relative to that node.
making a dynamycal width with mobile devices support
http://www.codeography.com/2011/06/14/dynamic-fixed-width-layout-with-css.html