I am trying to create rows of links in html+css, the format of which should look like this:
(Psuedocode)
<body class="class_with_minmaxwidth_set_in_css">
<div class="container">
<div class="row">
<div class="fixed_left_40px"></div>
<div class="fluid_center_which_changes_with_window_size"></div>
<div class="fixed_right_40px"></div>
</div>
... repeat more row divs
</div>
</body>
I have tried various combinations of using floats, positions and displays for each of the three divs within, but still am not able to set the right combination. Help will be highly appreciated!
display: table is perfect for this:
DEMO
<div class="container">
<div class="row">
<div class="fixed">40px</div>
<div class="fluid">fluid</div>
<div class="fixed">40px</div>
</div>
</div>
.container {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.row div {
display: table-cell;
}
.row div.fixed {
width: 40px;
}
.row div.fluid {
background: lightGreen;
}
If you want to align div elements in a line, use display: inline:block
<div class="row">
<div class="fixed_left_40px"></div>
<div class="fluid_center_which_changes_with_window_size"></div>
<div class="fixed_right_40px"></div>
</div>
CSS:
.row div{
display: inline-block;
height: 40px;
}
.fixed_left_40px{
width: 40px;
background: blue;
}
.fixed_right_40px{
background: red;
width: 40px;
}
Working Fiddle
.row div {
display: inline-block;
}
.row .fixed_left_40px {
float: left;
width: 40px;
}
.row .fixed_right_40px {
float: right;
width: 40px;
}
see http://jsfiddle.net/Bsrur/
Related
I have a header row where some of the header names are too long to fit on one line and have to be split. The headers are fixed height, sufficient for two lines. The text should be vertically centered.
Something like:
.container {
width: 100%;
height: 40px;
}
.pill {
display: inline-block;
width: 33%;
background-color: red;
text-align: center;
height: 40px;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill split">
Header
<br/>Two
</div>
<div class="pill">
Header Three
</div>
</div>
I can't figure out how to align all those headers correctly. Setting line-height to 40px makes the second header double-height; setting height to 40px throws them out of alignment.
Thanks!
So this is what I changed in your code:
Add vertical-align: middle to align the pills
Give line-height same as height for the pills other than split using the not selector:
.pill:not(.split) {
line-height: 40px;
}
In smaller displays the menu will wrap - so use float and clear them too.
Let me know your thoughts on this, thanks!
.container {
width: 100%;
height: 40px;
}
.pill {
display: inline-block;
vertical-align: middle;
float: left;
width: 33%;
background-color: red;
text-align: center;
height: 40px;
}
.pill:not(.split) {
line-height: 40px;
}
.pill:after{
content: '';
display: block;
clear: both;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill split">
Header
<br/>Two
</div>
<div class="pill">
Header Three
</div>
</div>
Flexbox can do that:
.container {
width: 100%;
height: 40px;
display: flex;
}
.pill {
display: flex;
flex: 0 0 30%;
margin: 0 1%;
justify-content: center;
align-items: center;
text-align: center;
background-color: red;
height: 40px;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill split">
LONG HEADER TEXT GOES HERE
</div>
<div class="pill">
Header Three
</div>
</div>
One option is change the way you are setting the elements side by side, so instead of inline-block:
Table-cell
.container {
width: 100%;
height: 40px;
}
.pill {
padding:10px;
border:1px solid white;
display: table-cell;
width: 33%;
background-color: red;
text-align: center;
height: 40px;
vertical-align:middle;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill">
Header
<br/>Two
</div>
<div class="pill">
Header Three
</div>
</div>
Add the following to your .pill css:
vertical-align:middle;
Here is an example
I'm having a bit of difficulty in displaying a table. I use display:table and display:table-cell a lot for sections usually. Especially when I just want to center the content of a section vertically. So to say, I have the following HTML:
<div class="wrapper">
<div class="cell">
<div class="red">
</div>
</div>
</div>
and the following css applied to the html:
html,body {
height: 100%;
}
.wrapper {
display: table;
width: 100%;
height: 100%;
}
.wrapper * {
width: 100%;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.red {
margin-right: auto;
margin-left: auto;
background: red;
height: 200px;
width: 200px;
}
Now there is a small problem. I want to add a section header to this particular section and the section header has to be a child of .wrapper, so the HTML changes as below :
<div class="wrapper">
<div class="section-heading">
<h1>section heading</h1>
</div>
<div class="cell">
<div class="red">
</div>
</div>
</div>
Now the problem with using display table and table-cell is that when I add a header to the section, I can't add it without it affecting the other child elements of .wrapper . So how do I add a heading (when the heading is added in the above HTML the .cell div seems to be moving horizontally slightly)?
Of course I could use absolute positioning, but I was just wondering, is there something that can be done, without taking the heading element out of the flow?
FIDDLE HERE
Did you try adding display:table-row to the section-heading?
.wrapper > .section-heading{
display:table-row;
height:auto;
}
Fiddle: http://jsfiddle.net/7xo353hg/4/
You can make heading container display: table-row:
.section-heading {
display: table-row;
text-align: center;
}
Check the demo:
html, body {
height: 100%;
}
.wrapper {
display: table;
width: 100%;
height: 100%;
}
.wrapper * {
width: 100%;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.red {
margin-right: auto;
margin-left: auto;
background: red;
height: 200px;
width: 200px;
}
.section-heading {
display: table-row;
text-align: center;
}
<div class="wrapper">
<div class="section-heading">
<h1>section heading</h1>
</div>
<div class="cell">
<div class="red"></div>
</div>
</div>
I'm trying to put 3 divs in the same row as the following code.
My CSS and HTML:
.row {
display: table;
width: 100%
}
.row > div {
display: table-cell;
height:30px; /*demo purposes */
}
#left-bar {
width: 10%;
background-color: #FF0000;
}
#middle-bar {
width: 70%;
background-color: #6600FF;
}
#right-bar {
width: 20%;
background-color: #99FF99;
}
<div class="row">
<div id="left-bar"> here I have an accordion </div>
<div id="middle-bar"> heve a have my canvas </div>
<div id="right-bar"> and here I have an editor</div>
</div>
Somehow the content of the middle-bar(my canvas) is positioned in the correct place, but the other two divs contents are in the bottom of the page as you can see here see photo. Do you guys know why this is happening?
After discussing the project further with you in the comments, and in chat, I think you should take an approach that uses flexbox instead. The code is fairly straight forward:
.container {
display: flex;
}
.left { flex-basis: 10%; background: #F99; }
.right { flex-basis: 20%; background: #99F; }
.middle { flex-basis: 70%; background: #9F9; }
<div class="container">
<div class="left">L</div>
<div class="middle">C</div>
<div class="right">R</div>
</div>
I only managed width.
There's nothing problematic see this.
.row {
display: table;
width: 100%
}
.row > div {
display: table-cell;
height:30px; /*demo purposes */
}
#left-bar {
width: 20%;
background-color: #FF0000;
}
#middle-bar {
width: 60%;
background-color: #6600FF;
}
#right-bar {
width: 20%;
background-color: #99FF99;
}
<div class="row">
<div id="left-bar"> here I have an accordion </div>
<div id="middle-bar"> heve a have my canvas </div>
<div id="right-bar"> and here I have an editor</div>
</div>
I need a number of elements to line up horizontally in the order in which they appear in the HTML. I need them to move to the right of their container.
If I float the items to the right then the order changes.
If I display as inline-block and make the container's text aligned to the right then there are spaces between them.
I can change the HTML however I cant remove all the white space (which may fix the issue with the inline-blocks). Can this be solved?
http://codepen.io/anon/pen/xbLbLE
<div class="cont">
<div class='itemA'>1</div>
<div class='itemA'>2</div>
<div class='itemA'>3</div>
<div class='itemA'>4</div>
</div>
<div class="cont contB">
<div class='itemB'>1</div>
<div class='itemB'>2</div>
<div class='itemB'>3</div>
<div class='itemB'>4</div>
</div>
.itemA,
.itemB {
width: 50px;
height: 50px;
}
.itemA {
background: green;
float: right;
}
.contB {
text-align: right;
}
.itemB {
background: red;
display: inline-block;
}
Float the elements that need to be in the correct order to the left and float their container to the right.
HTML
<div class="cont">
<div class='itemA'>1</div>
<div class='itemA'>2</div>
<div class='itemA'>3</div>
<div class='itemA'>4</div>
</div>
<div class="cont contB">
<div class='itemB'>1</div>
<div class='itemB'>2</div>
<div class='itemB'>3</div>
<div class='itemB'>4</div>
</div>
CSS
.itemA,
.itemB {
width: 50px;
height: 50px;
}
.itemA {
background: green;
}
.itemB {
background: red;
}
.cont {
float: right;
}
.cont div {
float: left;
}
and the jsFiddle: http://jsfiddle.net/enaeLr60/
The downside, as you have noticed, with using display: inline-block is that any space between each inline-block will be rendered as a single space. I prefer to float items to fix this versus the options like the following as they a not preferred.
<div>1</div><div>2</div> - no spaced between elements
<div>1</div><!-- comment block --><div>2</div> - comment between
elements
use a negative margin
UPDATE
My original answer forgot to include a wrapper around the .cont DIVs. As a result the DIVs with .itemA appear after the .itemB DIVs. See updated code to correct this.
HTML
<div class="list-container">
<div class="cont">
<div class='itemA'>1</div>
<div class='itemA'>2</div>
<div class='itemA'>3</div>
<div class='itemA'>4</div>
</div>
<div class="cont contB">
<div class='itemB'>1</div>
<div class='itemB'>2</div>
<div class='itemB'>3</div>
<div class='itemB'>4</div>
</div>
</div>
CSS
.itemA,
.itemB {
width: 50px;
height: 50px;
}
.itemA {
background: green;
}
.itemB {
background: red;
}
.list-container {
float: right;
}
.cont,
.cont div {
float: left;
}
updated jsFiddle: http://jsfiddle.net/enaeLr60/1
I am not sure if I am understanding your problem correctly, but can you give this CSS and try and see if it is what you are attempting to do.
.cont{
display:inline;
float:right
}
.itemA,
.itemB {
width: 50px;
height: 50px;
display: inline-block;
margin-right:-4px;
}
.itemA:last-child, .itemB:last-child{
margin-right:0;
}
.itemA {
background: green;
}
.contB {
text-align: right;
}
.itemB {
background: red;
}
The margin-right:4px is a hack around the display:inline-block; so, this may not be desirable.
My answer involves adding a wrapper around it all: http://codepen.io/anon/pen/KwvwyL
<div class="wrapper">
<div class="cont contA">
<div class='itemA'>1</div>
<div class='itemA'>2</div>
<div class='itemA'>3</div>
<div class='itemA'>4</div>
</div>
<div class="cont contB">
<div class='itemB'>1</div>
<div class='itemB'>2</div>
<div class='itemB'>3</div>
<div class='itemB'>4</div>
</div>
</div>
Then in the CSS:
.wrapper {
float: right;
}
.contA {
float: left;
background: green;
}
.contB {
float: left;
background: red;
}
.itemA, .itemB {
float: left;
}
.itemA,
.itemB {
width: 50px;
height: 50px;
display:inline-block;
}
.itemA { background: green; }
.cont { display:inline-block; word-spacing: -100%; }
.contB { float:right; }
.itemB { background: red; }
CodeOpen
http://jsfiddle.net/hqu8N/
<div id="container">
<div id="one"><p>one</p></div>
<div id="two"><p>two</p></div>
<div id="footer"><p>footer</p></div>
</div>
#container {
display: table;
width: 200px;
height: 200px;
background-color: red;
border-spacing: 5px;
}
#one {
display: table-cell;
background-color: yellow;
}
#two {
display: table-cell;
background-color: blue;
}
#footer {
display: table-footer-group;
background-color: green;
}
Basically i want the green footer to extend over to the end of the blue ID. And also between the green footer and the yellow ID it's 10 px of space instead of 5px. What am i doing wrong ?
I used grid for your case, and a grid-gap for a 5px distance:
#container {
display: grid;
grid-gap: 5px;
width: 200px;
height: 200px;
background-color: red;
}
#one {
background-color: yellow;
}
#two {
background-color: blue;
}
#footer {
background-color: green;
grid-column: 1 / 3;
}
<div id="container">
<div id="one">
<p>one</p>
</div>
<div id="two">
<p>two</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
https://jsfiddle.net/arman1373/4xkgd5Lj/
I had the same issue with both the header-group and footer-group.
I solved this by putting a container around my table which specified the basic width. Inside that I put a div with display: table properties as below
#tContainer {
width: 80%;
margin; 0% auto;
}
#tData {
display: table;
width: 100%
}
.tDataRow {
display: table-row;
}
.tDataRow span{
display: table-cell;
}
I didn't use table-header or table-footer but defined them separately:
.tDataFooter {
display: block;
width: auto;
}
And the element structure as follows:
<div id="tContainer">
<div id="tData">
<div class="tDataRow"><span class="dHeader"> xyz </span></div>
<div class="tDataRow"><span> data sets repeat </span></div>
</div>
<div class="tDataFooter"> Footer data </div>
</div>
I am hoping someone else has a neater solution but I couldn't get the header and footer to fit at all, not even the header columns to align with the data
Result:
Resulting table sample