I am wondering how to center elements within a div but keep the text left aligned.
Here is a jfiddle of what I have so far. I want the text to be in the middle of the div but to maintain its left justification.
http://jsfiddle.net/MgcDU/5994/
HTML:
<div class="span4" id="middleFooter">
<div class="mcont" >
<div class="mrow"> <h5 class="tcell"><b>Useful Links</b></h5> </div>
<ul>
<div class="mrow"> <li class="tcell">Contact Us</li> </div>
<div class="mrow"> <li class="tcell">About Us</li> </div>
<div class="mrow"> <li class="tcell">Copyright Information</li> </div>
<div class="mrow"> <li class="tcell">Terms & Conditions</li> </div>
</ul>
</div>
</div>
CSS:
#middleFooter {
color: #ccc2a0;
}
.mcont {
background-color: blue;
}
.mrow li {
background-color: red;
margin-left: auto;
margin-right: auto;
}
.mrow h5 {
display: table-row;
background-color: yellow;
}
.tcell {
display: table-cell;
}
You can try something like this - http://jsfiddle.net/GxgrL/
html:
<div class="span4" id="middleFooter">
<div class="mcont" >
<div class="mrow"> <h5 class="tcell"><b>Useful Links</b></h5> </div>
<ul>
<li class="tcell">Contact Us</li>
<li class="tcell">About Us</li>
<li class="tcell">Copyright Information</li>
<li class="tcell">Terms & Conditions</li>
</ul>
</div>
</div>
css:
#middleFooter {
color: #ccc2a0;
}
.mcont {
background-color: blue;
}
li {
background-color: red;
display: block;
text-align: center;
}
li a {
background-color: green;
display: inline-block;
margin: 0 auto;
width: 170px;
text-align: left;
}
.mrow {
text-align: center;
}
.mrow h5 {
display: inline-block;
background-color: yellow;
text-align: left;
width: 170px;
}
You can get this effect by making the container div 50% width then floating it to the right. So in your fiddle add:
.mcont {
width: 50%;
float: right;
}
If you want to keep the blue background you'll need to wrap all the .mrow divs in a wrapper and apply the styles above so like:
<div class="mcont" >
<div class="wrapper">
<div class="mrow"> <h5 class="tcell"><b>Useful Links</b></h5> </div>
<ul>
<div class="mrow"> <li class="tcell">Contact Us</li> </div>
<div class="mrow"> <li class="tcell">About Us</li> </div>
<div class="mrow"> <li class="tcell">Copyright Information</li> </div>
<div class="mrow"> <li class="tcell">Terms & Conditions</li> </div>
</ul>
</div>
</div>
Then:
.wrapper {
width: 50%;
float: right;
}
Just assign your .mrow divs a width and give them margin:0px auto and they will be center aligned.
.mrow{
width:20%;
margin:0px auto;
}
Here's an example of your fiddle with that style added: http://jsfiddle.net/HcQcn/
Related
I am trying to create a footer with unordered list elements. Below these lists I want to have a second div container with the copyright in it.
This is what I want to achieve
And this is my code so far
.list {
list-style: none;
display: inline-block;
}
#imprintContent {
border-bottom: 1px solid #656a70;
}
<div id="imprint">
<div id="imprintContent">
<ul class="list">
<li>Company</li>
<li>Street</li>
<li>Location</li>
<li>
Mail
</li>
</ul>
<ul class="list">
<li>Small text</li>
<li>
Privacy
</li>
</ul>
</div>
<div id="copyright">
© Copyright
</div>
</div>
How can I center these lists, place a small line below them (maybe a bottom border) and place the copyright below this border?
A free space should remain on the left and right. You can see a working example footer here
https://www.hashicorp.com/contact
if your issee is making footer center, just use text-align to center
.list {
list-style: none;
display: inline-block;
}
#imprintContent {
border-bottom: 1px solid #656a70;
}
#imprint {
text-align:center
}
<div id="imprint">
<div id="imprintContent">
<ul class="list">
<li>Company</li>
<li>Street</li>
<li>Location</li>
<li>
Mail
</li>
</ul>
<ul class="list">
<li>Small text</li>
<li>
Privacy
</li>
</ul>
</div>
<div id="copyright">
© Copyright
</div>
</div>
Hi
This problem can be easily solved with flexbox.
#imprint{
margin: 0% 20%; /*this make the free space to the sides, adjust the 20% to the desired number*/
}
#imprintContent{
display: flex;
justify-content: center;
align-items: center;
}
#green{
background: green;
}
#red{
background: red;
}
#copyright{
text-align: center;
}
.list{
padding: 10%;
margin: 10%;
}
.list > li{
margin-top: 4%;
margin-bottom: 4%;
}
<div id="imprint">
<div id="imprintContent">
<ul id="green" class="list">
<li>Company</li>
<li>Street</li>
<li>Location</li>
<li>
Mail
</li>
</ul>
<ul id="red" class="list">
<li>Small text</li>
<li>
Privacy
</li>
</ul>
</div>
<hr>
<div id="copyright">
© Copyright
</div>
</div>
You can do this
#imprint { display:table; margin:0 auto; }
This is a start. . .
body * {...} is just a reset.
body * {
margin: 0;
padding: 0;
}
footer {
max-width: 60%;
margin: 0 auto;
}
li {
list-style-type: none;
}
.lists {
display: flex;
margin-bottom: 2rem;
}
.lists__list {
flex: 1 auto;
}
.footer__copyright {
border-top: 1px solid black;
padding-top: 2rem;
text-align: center;
}
<footer>
<div class="lists">
<ul class="lists__list">
<li>Company</li>
<li>Street</li>
<li>Location</li>
<li>
Mail
</li>
</ul>
<ul class="lists__list">
<li>Small text</li>
<li>
Privacy
</li>
</ul>
</div>
<div class="footer__copyright">
© Copyright
</div>
</footer>
I'm recreating an article I found on The Economist and I'm having trouble creating the header. Please keep in mind I'm doing this without recreating their code verbatim. I'm trying to create my own implementation.
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
}
.header__left-content {
display: inline;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
<html>
<body>
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
</body>
</html>
I'm having trouble getting the paragraph element, and ultimately its container to sit to the right as shown in the article.
Thoughts on this?
You can use display: flex; justify-content: space-between; on the element that wraps the the left/right portions of the header to put those in a row separated by the available space left over. And you can use align-items to align that content vertically.
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.header__left-content {
display: inline;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
This is happening due to your class="header__site-functions" is ablock element and is taking the 100% of the width, so it doesn't fit in a line. You can use a floating element to fix it:
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
}
.header__left-content {
display: inline-block;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
.header__site-functions{
float:right;
}
<html>
<body>
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
</body>
</html>
I try to use CSS display:table instead HTML table tags.
My HTML:
<div class="c_result">
<div class="rp-row">
<ul class="rp-first">
<li>London</li>
</ul>
<ul class="rp-second">
<li>Male</li>
<li>Female</li>
</ul>
<ul class="rp-result">
<li>result1</li>
<li>result2</li>
<li>result3</li>
</ul>
</div>
<div class="rp-row">
<ul class="rp-first">
<li>Paris</li>
</ul>
<ul class="rp-second">
<li>Male</li>
<li>Female</li>
</ul>
<ul class="rp-result">
<li>result4</li>
<li>result5</li>
<li>result6</li>
</ul>
</div>
</div>
My CSS:
.c_result {
border: 1px solid red;
display: table;
width: 100%;
}
.c_result .rp-row {
display: table-row;
border: 1px solid #000;
}
.c_result ul {
display: table-row;
}
.c_result .rp-row li {
display: table-row;
}
The result:
But my desired result is :
The border styles didn't apply too and when I try to use border it doesn't appear in the result , How can I do that ?
Best regards.
Is this already looking better ??
edit: colspan & rowspan not possible in css or with a trick
.c_result {
border: 1px solid red;
display: table;
width: 100%;
}
.rp-row {
display: table-row;
}
.cell {
display: table-cell;
}
<div class="c_result">
<div class="rp-row">
<ul class="cell rp-first">
<li>London</li>
</ul>
<ul class="cell rp-second">
<li>Male</li>
<li>Female</li>
</ul>
<ul class="cell rp-result">
<li>result1</li>
<li>result2</li>
<li>result3</li>
</ul>
</div>
<div class="rp-row">
<ul class="rp-first">
<li>Paris</li>
</ul>
<ul class="cell rp-second">
<li>Male</li>
<li>Female</li>
</ul>
<ul class="cell rp-result">
<li>result4</li>
<li>result5</li>
<li>result6</li>
</ul>
</div>
</div>
Edit:
.c_result {
width: 600px;
/* total width */
}
.c_result * {
display: block;
/* remove list items and so..*/
text-align: center;
/*center text*/
padding: 0;
/* reset */
margin: 0;
/* reset */
}
li {
outline: 1px solid black;
/*border is calculated in element width, outline not.*/
}
.rp-row > * {
float: right; /*floats bases to right*/
}
.rp-first {
width: 12.5%;
/* 1/8 width */
}
.rp-first li {
line-height: 198px;
/* base = floor ( 200 / 3 (max split) ) * 3 (max split) = 198 */
}
.rp-second {
width: 25%;
/* 2/8 width */
}
.rp-second li {
line-height: 99px;
/* base / 2 = 99; */
}
.rp-result {
width: 62.5%;
/* 6/8 width */
}
.rp-result li {
line-height: 66px;
/* base / 3 = 66; */
}
<div class="c_result">
<div class="rp-row">
<ul class="rp-first">
<li>London</li>
</ul>
<ul class="rp-second">
<li>Male</li>
<li>Female</li>
</ul>
<ul class="rp-result">
<li>result1</li>
<li>result2</li>
<li>result3</li>
</ul>
</div>
<div class="rp-row">
<ul class="rp-first">
<li>Paris</li>
</ul>
<ul class="rp-second">
<li>Male</li>
<li>Female</li>
</ul>
<ul class="rp-result">
<li>result4</li>
<li>result5</li>
<li>result6</li>
</ul>
</div>
</div>
Hello I have three columns that need a right border with a fixed height, not depending on the number of items in the column.
My code
html
<div class="col-sm-2">
<div class="footer-col">
<ul>
<li class="footer-title hidden-xs">Customer Care</li>
<li>Contact us</li>
<li>Help</li>
<li>Shipping</li>
<li>Returns</li>
<li>Size Guide</li>
</ul>
</div>
</div>
<div class="col-sm-2 hidden-xs">
<div class="footer-col">
<ul>
<li class="footer-title">About Us</li>
<li>Our Story</li>
<li>Careers</li>
</ul>
</div>
</div>
<div class="col-sm-2 hidden-xs">
<div class="footer-col">
<ul>
<li class="footer-title">Shortcuts</li>
<li>My Account</li>
<li>Store Locator</li>
<li>Gift Cards</li>
<li>Payment</li>
</ul>
</div>
</div>
.wrapper {
display: inline-block;
background-color: #000000;
width: 100%;
height: 150px;
color: #999999;
}
.col-sm-2 {
float: right;
margin: 0;
width: 32%;
display: inline-block;
height: 90%;
}
.footer-col {
float: right;
margin: 0;
width: 90%;
padding-left: 10px;
display: inline-block;
height: 90%;
}
ul {
display: inline-block;
width: 90%;
height: 100%;
border-right: 1px solid #999999;
list-style: none;
}
li a {
color: #FFFFFF;
}
https://jsfiddle.net/michaelyuen/72dc7xrd/
There are two things:
1) Set ul height to 100%
2) Set height to parent or parent's parent. In this case, it's the wrapper.
OR use table, then you have to fix width instead of height.
https://jsfiddle.net/michaelyuen/72dc7xrd/1/
.wrapper {
display: table-row;
background-color: #000000;
color: #999999;
}
.col-sm-2 {
margin: 0;
padding-left: 10px;
width: 150px;
display: table-cell;
height: 90%;
border-right: 1px solid #999999;
vertical-align: top;
}
.footer-col {
margin: 0;
width: 90%;
display: inline-block;
height: 90%;
}
ul {
display: block;
margin: 0;
padding: 0;
width: 90%;
height: 100%;
list-style: none;
}
li a {
color: #FFFFFF;
}
Try this:
<style>
.verticalLine {
border-left: thick solid #E2C4C4;
margin-top:6px;
width:5px;
height:50px;
left: 408px;
position: absolute;
}
.pull_left {
float:left;
}
.clear {
clear: both;
}
</style>
<div class="col-sm-2">
<div class="footer-col pull_left">
<ul>
<li class="footer-title hidden-xs">Customer Care</li>
<li>Contact us</li>
<li>Help</li>
<li>Shipping</li>
<li>Returns</li>
<li>Size Guide</li>
</ul>
</div>
<div class="verticalLine pull_left"></div>
</div>
<div class="clear"></div>
<div class="col-sm-2 hidden-xs">
<div class="footer-col pull_left">
<ul>
<li class="footer-title">About Us</li>
<li>Our Story</li>
<li>Careers</li>
</ul>
</div>
<div class="verticalLine pull_left"></div>
</div>
<div class="clear"></div>
<div class="col-sm-2 hidden-xs">
<div class="footer-col pull_left">
<ul>
<li class="footer-title">Shortcuts</li>
<li>My Account</li>
<li>Store Locator</li>
<li>Gift Cards</li>
<li>Payment</li>
</ul>
</div>
<div class="verticalLine"></div>
</div>
Try like this: Demo
.col .well {
margin-bottom: -99999px;
padding-bottom: 99999px;
border-right:1px solid #ddd !important;
}
.col-wrap {
overflow: hidden;
}
.well {
min-height:20px;
padding:19px;
margin-bottom:20px;
background:transparent !important;
border-right:1px solid #e3e3e3 !important;
border:none !important;
box-shadow:none !important;
}
HTML:
<div class="container">
<div class="row col-wrap">
<div class="col-sm-2 col">
<div class="footer-col well">
....
</div>
</div>
<div class="col-sm-2 hidden-xs col">
<div class="footer-col well">
....
</div>
</div>
<div class="col-sm-2 hidden-xs col">
<div class="footer-col well">
....
</div>
</div>
</div>
</div>
Try this Create a outer container and apply overflow: hidden and apply margin and padding to the bottom
http://www.bootply.com/YNUeK8I29h
You can use after/before pseudo selectors.
http://jsfiddle.net/s7w4sqLd/
.footer-col ul:after {
position:absolute;
content:" ";
left:0;
top:0;
width:100%;
height:50px;
border-right: solid 1px #2a343f;
}
.footer-col ul{
position:relative;
float:left;
padding-right:10px;
}
.footer-col ul li {
list-style:none;
}
I was wondering if anyone can help me with this asymmetrical fluid grid I have, but I cannot use Javascript or modify html, it must be CSS only
The html code is this:
<ul>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
</ul>
And the CSS is something like this:
ul {
width:1200px;
padding:10px;
}
li.image {
float: left;
margin: 10px;
overflow: hidden;
width:220px;
height:220px;
}
If you will use media queries, this could help, hopefully:
HTML:
<ul>
<li class="image"></li>
<li class="image"></li>
<li class="image2"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image fix1" ></li>
<li class="image2"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
<li class="image fix2"></li>
</ul>
CSS:
ul {
width:1200px;
padding:10px;
}
li.image {
float: left;
margin: 10px;
overflow: hidden;
width:220px;
height:220px;
background-color:black;
}
li.image2 {
float: left;
margin: 10px;
overflow: hidden;
width:460px;
height:460px;
background-color:black;
}
li.fix1 {
margin-top:-230px;
}
li.fix2 {
margin-top:-710px;
margin-left:250px;
}
Demo:
http://fiddle.jshell.net/upwxrga3/show/
EDIT: Updated CSS, because HTML can't be changed:
ul {
width:1200px;
padding:10px;
}
li.image {
float: left;
margin: 10px;
overflow: hidden;
width:220px;
height:220px;
background-color:black;
}
ul li:nth-child(3), ul li:nth-child(7) {
float: left;
margin: 10px;
overflow: hidden;
width:460px;
height:460px;
background-color:black;
}
ul li:nth-child(6) {
margin-top:-230px;
}
ul li:nth-child(14) {
margin-top:-710px;
margin-left:250px;
}
I tried on this and maybe work for you also I made it as below:
this is the CSS:
*{box-sizing: border-box;}
html{height: 100%;}
body{margin: 0;}
.container{
margin: 0 auto;
width: 970px;
}
.row{
width: 100%;
margin-right: -15px;
margin-bottom: 20px;
margin-left: -15px;
}
.container > .row:first-child{
margin-bottom: 0;
}
.row:before, .row:after{
content: " ";
display: table;
}
.row:after{clear: both;}
[class*=column-]{
float: left;
min-height: 150px;
padding: 15px;
position: relative;
}
[class*=column-] [class*=column-]{
background-color: lightgrey;
background-clip: content-box;
padding: 0;
width: 100%;
}
[class*=column-] .row{
margin: 0 0 20px;
}
[class*=column-] .row:last-child{
margin: 0;
}
.column-1{width: 20%;}
.column-2{
background-color: lightgrey;
background-clip: content-box;
height: 350px;
width: 40%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Asymmetrical Fluid Gride</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="column-1">
<div class="row">
<div class="column-1"></div>
</div>
<div class="row">
<div class="column-1"></div>
</div>
</div>
<div class="column-1">
<div class="row">
<div class="column-1"></div>
</div>
<div class="row">
<div class="column-1"></div>
</div>
</div>
<div class="column-2"></div>
<div class="column-1">
<div class="row">
<div class="column-1"></div>
</div>
<div class="row">
<div class="column-1"></div>
</div>
</div>
</div>
<div class="row">
<div class="column-2"></div>
<div class="column-1">
<div class="row">
<div class="column-1"></div>
</div>
<div class="row">
<div class="column-1"></div>
</div>
</div>
<div class="column-1">
<div class="row">
<div class="column-1"></div>
</div>
<div class="row">
<div class="column-1"></div>
</div>
</div>
<div class="column-1">
<div class="row">
<div class="column-1"></div>
</div>
<div class="row">
<div class="column-1"></div>
</div>
</div>
</div>
</div>
</body>
</html>
you can run it in here by pressing "Run code snippet"
hope to solve your problem...