I want to know, can I do this mark up use just display: table; and display: table-cell for columns:
For example 1 and 3 columns width is 15% of the screen and last one is 70%.
If I try to do it like this:
Page:
#content #left-column
{
display: table-cell;
width: 15%;
}
#content #mainContent
{
display: table-cell;
padding-right: 22px;
width: 70%;
}
#content #right-column
{
display: table-cell; /* width: 300px;*/
width: 15%;
}
I`ll get mark-up like this .
How cam I create correct markup?
-------Edited-------------------------------
I have to add this code to fix my problem.
content
{
display: table;
width: 100%;
}
Seems your code works.. I just added the parent element with display: table; and it's fine.
#content
{
display: table;
width: 100%;
}
#content div
{
border: 1px dashed #000;
}
#content #left-column
{
display: table-cell;
width: 15%;
}
#content #mainContent
{
display: table-cell;
padding-right: 22px;
width: 70%;
}
#content #right-column
{
display: table-cell; /* width: 300px;*/
width: 15%;
}
It's possible you have a markup error, did you use something like this?
<div id="content">
<div id="left-column">
Left column
</div>
<div id="mainContent">
Main Content
</div>
<div id="right-column">
Right column
</div>
</div>
http://jsfiddle.net/2dMfZ/1/
Related
I have a problem to increase the space between elements within an inline block container. I found a trick to do that but it works only for the first line...
By the way, I have n number of elements and a specific container width.
The code:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: blue;
height: 300px;
width: 620px;
display: inline-block;
}
.container div + div {
margin-left: 33px;
}
.child1 {
width:200px;
height: 100px;
display:inline-block;
background-color: red;
}
.child2 {
width: 200px;
height: 100px;
display: inline-block;
background-color: green;
}
.child3 {
width: 200px;
height: 100px;
display: inline-block;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
</body>
</html>
The Result:
(Note: It has to support all browsers, +IE7)
Thank you very much!
Use the nth-child selector to select every three child!
https://jsfiddle.net/25x4ga0g/1/
.container div:nth-child(2n + 1) {
margin-left: 0px;
}
More about nth-child selector
Use margin-right instead of margin-left.
.container div {
margin-right: 33px;
}
.container {
background-color: blue;
height: 300px;
width: 620px;
display: inline-block;
}
.container div {
margin-right: 33px;
}
.child1 {
width: 200px;
height: 100px;
display: inline-block;
background-color: red;
}
.child2 {
width: 200px;
height: 100px;
display: inline-block;
background-color: green;
}
.child3 {
width: 200px;
height: 100px;
display: inline-block;
background-color: yellow;
}
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
Did you try this ?
div+div:last-of-type{
margin:0px;
}
Insert this snippet in the style part and it should be ok. It will work for the last div only .
To do this you can use something fantastic called Flexbox.
First, set the container to display: flex. Then use flex-wrap: wrap so if you add more elements, they will appear on a new row below. Also make sure to use align-content: flex-start so the elements will start from the left.
Finally add a margin-left and margin-bottom to all your child-divs so they will have space between them. Because we are use Flexbox, your problem with the margin will now be eliminated.
If you want the divs to fit perfectly in the container instead, just remove the margins of the child-divs and set the parent to justify-content: space-between.
CSS Code:
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 620px;
height: 300px;
background-color: blue;
}
.container div {
margin-right: 33px;
margin-bottom: 5px;
}
.child1 {
width: 200px;
height: 100px;
display:inline-block;
background-color: red;
}
.child2 {
width: 200px;
height: 100px;
display: inline-block;
background-color: green;
}
.child3 {
width: 200px;
height: 100px;
display: inline-block;
background-color: yellow;
}
Working Fiddle
Read more about Flexbox
An alternate solution if you don't want to use Flexbox, you could just select every third children and then set the margin-left to 0:
.container div:nth-child(3n) {
margin-left: 0;
}
Hope that helped
I have a CSS table and I would like to have space in-between the cells but not at the left of the first image and the right of the last image.
Here is a screenshot of what I have:
Here is a screenshot of what I would like:
The current HTML is:
<div id="footer">
<div class="lower"><img src="images/one.jpg" alt="Ring being put on finger"/></div>
<div class="lower"><img src="images/two.jpg" alt="The mens trousers"/></div>
<div class="lower"><img src="images/three.jpg" alt="Flowers"/></div>
<div class="lower"><img src="images/four.jpg" alt="The rings"/></div>
</div>
and the CSS is
#footer {
display: table;
width: 100%;
max-width: 1024px;
margin-top: 1%;
}
.lower {
display: table-cell;
}
#footer img {
width: 100%;
height: auto;
max-width: 256px;
}
Please bear in mind that this is a responsive webpage so I would like the space to always remain however I would like the space to change according to device size, so using %.
Apply this.
#footer {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 1024px;
background-color: #F00;
padding: 0;
margin: 0;
max-height: content-height;
}
.lower {
margin-left: 2%;
}
#footer img {
width: 100%;
height: 100%;
}
Demo
hi pls apply this css and set padding
.lower {
display: table-cell;
padding:0 20px;
}
.lower:first-child{ padding-left:0}
.lower:last-child{ padding-right:0}
Try display: flex; instead of display: table;
Give display: flex; and justify-content: space-between; to the parent.
Use CSS adjacent element selector:
.lower + .lower {
padding-left: 20px;
}
#footer {
display: table;
width: 100%;
max-width: 1024px;
margin-top: 1%;
}
.lower {
display: table-cell;
}
.lower + .lower {
padding-left: 20px;
}
#footer img {
width: 100%;
height: auto;
max-width: 256px;
}
<div id="footer">
<div class="lower"><img src="images/one.jpg" alt="Ring being put on finger"/></div>
<div class="lower"><img src="images/two.jpg" alt="The mens trousers"/></div>
<div class="lower"><img src="images/three.jpg" alt="Flowers"/></div>
<div class="lower"><img src="images/four.jpg" alt="The rings"/></div>
</div>
Demo
<div class="subject" index= "0">
<span class="subject_name">FIFA</span>
<span class="subject_completion">55%</span>
</div>
.subject span
{
display: table-cell;
vertical-align: middle;
}
Why it is not vertically aligning my span div? How do i align it vertically which should not affect horizontal aligning also?
I am not preferring using top, margin-top, padding-top. I am preferring something which should work even size of my circle changes.
I am free to modify html also, but i am first preferring span instead div.
Please suggest some solutions.
You don't need any special rules at all for the spans. You can just add these three rules to the container:
.subject {
display: flex;
align-items: center;
justify-content: center;
}
.user_body_content_container
{
display: table;
}
.subject_container
{
width: 200px;
height: 250px;
border: 1px solid #eee;
display: table-cell;
}
.subject
{
border-radius: 50%;
border: 1px solid #653;
width: 175px;
height: 175px;
margin: auto;
margin-top: 25%;
display: flex;
align-items: center;
justify-content: center;
}
<div class="user_body_content_container">
<div class="subject_container" id="subject_container0" index="0">
<div class="subject" index= "0">
<span class="subject_name">FIFA</span>
<span class="subject_completion">55%</span>
</div>
</div>
</div>
you have too many display: table and display: table-cell for the task you're doing.
try
.user_body_content_container
{
}
.subject_container
{
width: 200px;
height: 250px;
border: 1px solid #eee;
/*display: table-cell;*/
/*remove above*/
}
.subject
{
border-radius: 50%;
border: 1px solid #653;
width: 175px;
height: 175px;
margin: auto;
margin-top: 25%;
display: table;
text-align: center;
}
.subject span
{
display: table-cell;
vertical-align: middle;
}
Jsfiddle
You can use following CSS classes.
.user_body_content_container
{
display: table;
}
.subject_container
{
width: 200px;
height: 250px;
border: 1px solid #eee;
display: table-cell;
position:absolute;
}
.subject
{
border-radius: 50%;
border: 1px solid #653;
width: 175px;
height: 175px;
margin: auto;
margin-top: 25%;
}
.subject span
{
display:block;
position: relative;
top:50%;
text-align:center;
}
So here's the solution I came up with:
css:
body, html{
margin:0; padding:0;height:100%
}
.user_body_content_container{
height:100%;
}
.subject_container{
display:table;
width:100%;
height:100%;
vertical-align:middle
}
.subject
{
display: table-cell;
vertical-align: middle;
text-align:center;}
.subject span{border:1px solid black;width:175px; display:inline-block}
/*no height given, to give it room to adjust for long texts*/
tested it with long text and short text and it appears to be working.
Note: 100% heights are required in the container `div's and body to make the page full height.
here's the codepen: http://tinyurl.com/klzknog
There are three ways for vertical align: flexbox, display: table-cell and position.
HTML
<div class="container one">
<p>I'm a text</p>
</div>
<div class="container two">
<p>I'm a text</p>
</div>
<div class="container three">
<p>I'm a text</p>
</div>
CSS (Sass)
.container {
width: 200px;
height: 200px;
border: 1px solid tomato;
float: left;
margin-right:1em;
}
.one {
display: table;
p {
display:table-cell;
vertical-align: middle;
}
}
.two {
display: flex;
align-items: center;
}
.three {
position: relative;
p {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0;
}
}
Demo
Add the following style to the parent class
.subject{
text-align: center;
display: table-cell;
vertical-align: middle;
}
this would align the span both horizontally and vertically
.headers
{
background-color: #ff0000;
width: 100%;
overflow: hidden;
display: table;
}
.logo
{
height: 35px;
border: 1px solid #00ff00;
float: left;
width: 30px;
}
.slogan
{
float: right;
display: table-cell;
vertical-align: middle;
}
<div class="headers">
<div class="logo"></div>
<div class="slogan">IIN</div>
</div>
How do i center my div[slogan] without using negative margin/top 50%?
you don't need floats when using display: table/table-cell ... this should center the .slogan div using the table-cell layout.
.headers
{
background-color: #ff0000;
width: 100%;
overflow: hidden;
display: table;
}
.logo
{
height: 35px;
border: 1px solid #00ff00;
/*float: left; NOT THIS */
width: 30px;
display: table-cell; /* THIS */
}
.slogan
{
/*float: right; NOT THIS */
display: table-cell;
vertical-align: middle;
text-align: right; /* THIS */
}
<div class="headers">
<div class="logo"></div>
<div class="slogan">IIN</div>
</div>
If you are looking to middle slogan vertically then please check the fiddle https://jsfiddle.net/nileshmahaja/e6byt6zt/
CSS
.headers
{
background-color: #ff0000;
width: 100%;
overflow: hidden;
display: table;
vertical-align:middle;
}
.logo
{
height: 35px;
border: 1px solid #00ff00;
float: left;
width: 30px;
}
.slogan
{
display: table-cell;
vertical-align: middle;
text-align:right;
}
change your slogan class with this
.slogan {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
}
You should use 'margin: 0 auto ;' on the . If you want to align text inside the div you can just use 'text-align: center ;'.
Check this post click
I have a list of divs like a menu and I want to center the spans inside them. It works if they are not floated, but once I float them, it won't center the spans anymore. Any idea why and how to solve this?
#panel {
display: table-cell;
vertical-align: middle;
width: 40%;
float: left;
background-color: yellow;
height: 80px;
}
span {
background-color: green;
}
<div id="panel"><span>Some caption </span>
</div>
<div id="panel"><span>Some caption </span>
</div>
Try like this: demo
CSS:
#panel {
display: block;
width: 40%;
float: left;
background-color: yellow;
height: 80px;
line-height: 80px;
vertical-align: middle;
/* tall height for emphasis */
}
span {
background-color: green;
display: table-cell;
vertical-align: middle;
}
UPDATE: If you dont need full height, you can use like this: Demo
CSS:
#panel {
display: block;
width: 40%;
float: left;
background-color: yellow;
height: 80px;
line-height: 80px;
vertical-align: middle;
/* tall height for emphasis */
}
span {
background-color: green;
display: inline-block;
vertical-align: middle;
line-height:30px;
}
#panel {
display: table-cell;
vertical-align: middle;
width: 40%;
float: left;
background-color: yellow;
height: 80px;
/* tall height for emphasis */
}
span {
float:left;
margin-top:13%;
background-color: green;
}
<div id="panel"><span>Some caption </span>
</div>
<div id="panel"><span>Some caption </span>
</div>