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...
Related
The first example shows what I'm trying to achieve.
But, I can't set a width to .sub because there might be new items added to .sub. Hence the width should increment accordingly.
But, without setting a width, the result is as shown in example 2.
Any ways to let .sub items grow while maintaining the horizontal layout?
.wrap, .wrap2 {
width: 100px;
}
.container {
width:100%;
background: #ccc;
}
.item {
position:relative;
}
.sub {
background: #eee;
position: absolute;
left:100px;
top:0;
width: 340px;
}
.sub li {
display:inline-block;
border-left: 1px solid black;
padding: 0 10px;
&:first-child {
padding: 0 10px 0 0;
border-left:0;
}
}
.wrap2 .sub {
width:auto;
}
<h4>Example1. This is what I want. But, without setting width to .sub</h4>
<div class="wrap">
<div class="container">
<ul>
<li class="item item1">
hello
<ul class="sub">
<li class="item item1">hello world</li>
<li class="item item2">world hello</li>
<li class="item item3">foo bar</li>
<li class="item item4">bar foo</li>
</ul>
</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</div>
</div>
<h4>Example2. This is what happens when no width is set to .sub</h4>
<div class="wrap2">
<div class="container">
<ul>
<li class="item item1">
hello
<ul class="sub">
<li class="item item1">hello world</li>
<li class="item item2">world hello</li>
<li class="item item3">foo bar</li>
<li class="item item4">bar foo</li>
</ul>
</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="4item item4">bar</li>
</ul>
</div>
</div>
You can just add:
.sub {
white-space:nowrap;
}
This will force the contents to stay inline and disregard the width of the parent.
.wrap,
.wrap2 {
width: 100px;
}
.container {
width: 100%;
background: #ccc;
}
.item {
position: relative;
}
.sub {
background: #eee;
position: absolute;
left: 100px;
top: 0;
width: 300px;
white-space: nowrap;
}
.sub li {
display: inline-block;
border-left: 1px solid black;
padding: 0 10px;
&: first-child {
padding: 0 10px 0 0;
border-left: 0;
}
}
.wrap2 .sub {
width: auto;
}
<h4>Example2. This is what happens when no width is set to .sub</h4>
<div class="wrap2">
<div class="container">
<ul>
<li class="item item1">
hello
<ul class="sub">
<li class="item item1">hello</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</div>
</div>
you can set display:flex in your .sub
.wrap {
width: 100px;
}
.container {
width: 100%;
background: #ccc;
}
.item {
position: relative;
}
.sub {
background: #eee;
position: absolute;
left: 100px;
top: 0;
display: flex
}
.sub li {
display: inline-block;
border-left: 1px solid black;
padding: 0 10px;
}
.sub li:first-child {
padding: 0 10px 0 0;
border-left: 0;
}
<h4>Example1. This is what I want. But, without setting width to .sub</h4>
<div class="wrap">
<div class="container">
<ul>
<li class="item item1">
hello
<ul class="sub">
<li class="item item1">hello</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</div>
</div>
Edit: based on your updated question, you can use as others already pointed out whitespace:nowrap
.wrap {
width: 100px;
}
.container {
width: 100%;
background: #ccc;
}
.item {
position: relative;
}
.sub {
background: #eee;
position: absolute;
left: 100px;
top: 0;
white-space:nowrap
}
.sub li {
display: inline-block;
border-left: 1px solid black;
padding: 0 10px;
}
.sub li:first-child {
padding: 0 10px 0 0;
border-left: 0;
}
<h4>Example1. This is what I want. But, without setting width to .sub</h4>
<div class="wrap">
<div class="container">
<ul>
<li class="item item1">
hello
<ul class="sub">
<li class="item item1">hello world</li>
<li class="item item2">world hello</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</div>
</div>
Just add white-space: nowrap to your .sub.
.wrap, .wrap2 {
width: 100px;
}
.container {
width:100%;
background: #ccc;
}
.item {
position:relative;
}
.sub {
background: #eee;
position: absolute;
left:100px;
top:0;
width: 300px;
}
.sub li {
display:inline-block;
border-left: 1px solid black;
padding: 0 10px;
&:first-child {
padding: 0 10px 0 0;
border-left:0;
}
}
.wrap2 .sub {
width:auto;
white-space:nowrap;
}
<h4>Example2. This is what happens when no width is set to .sub</h4>
<h4>and white-space:nowrap is added</h4>
<div class="wrap2">
<div class="container">
<ul>
<li class="item item1">
hello
<ul class="sub">
<li class="item item1">hello</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</li>
<li class="item item2">world</li>
<li class="item item3">foo</li>
<li class="item item4">bar</li>
</ul>
</div>
</div>
I am really new to coding. Formatting is always an issue with me and I spend lots of time looking at similar questions in here and reading tutorial etc and tried different things. I have the exact same code on one page and it seems center. However I can't get my items centered here or replicate. Once I have my header centered I would like my nav bar to be centered underneath. PLease help.
html, body {
margin: 0 auto;
padding: 0;
}
.container {
max-width: auto;
margin: 0 auto;
}
.box {
border: 2px white dotted;
border-radius: 15px;
margin-top: 30px;
margin-left:auto;
margin-right:auto;
width: 470px;
padding: 10px;
display:inline-block;
}
.nav-pills li a {
color: black;
border-radius: 10px;
margin: 3px;
font-size: 20px;
font-weight: 589px;
vertical-align:middle;
border-radius:0px;
background-color: white;
display:inline-block;
}
.nav-pills {
position: relative;
margin-top: 20px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
<div class="header" id="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-4 col-centered">
<div class="box">
<h2>lewis <br><span>Designs</span></h2>
</div>
</div>
</div>
<div class="menu">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<ul class="nav nav-pills">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
To center the title: make .box width:100% and the h2 text-align:center.
To center the ul menu I followed the solution three: align ul to center of div
html,
body {
margin: 0 auto;
padding: 0;
}
.container {
max-width: auto;
margin: 0 auto;
}
.box {
border: 2px white dotted;
border-radius: 15px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
width: 100%; // NEW WIDTH
padding: 10px;
display: inline-block;
}
.box h2 {
text-align: center; // CENTER TITLE
}
.nav-pills li a {
color: black;
border-radius: 10px;
margin: 3px;
font-size: 20px;
font-weight: 589px;
vertical-align: middle;
border-radius: 0px;
background-color: white;
display: inline-block;
}
.nav-pills {
position: relative;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
text-align: center;
display: table; // SOLUTION 3
margin: 0 auto; //
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="header" id="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-4 col-centered">
<div class="box">
<h2>lewis <br><span>Designs</span></h2>
</div>
</div>
</div>
<div class="menu">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<ul class="nav nav-pills">
<li>Home
</li>
<li>About
</li>
<li>Gallery
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
I see that you're using Bootstrap. You can do what you want with a lot less markup.
.nav-pills > li {
float: none;
display: inline-block;
}
<div class="container text-center">
<h2>lewis <br><span>Designs</span></h2>
<ul class="nav nav-pills text-center">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
Demo JSFiddle
You can make use of better semantic code to make it clear how this section is functioning and then simplify the code with built-in classes in Bootstrap, e.g., text-center.
<header class="header text-center" id="header">
<h1>lewis Designs</h1>
<nav>
<ul class="nav nav-pills">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
</header>
The only CSS needed to center the nav is this:
nav {
display: inline-block;
}
I'd definitely recommend familiarizing with documents pertaining to things like utility classes in Bootstrap. You may not be able to do everything you want, but you can minimize the need to go markup heavy and create a bunch of classes that Bootstrap already has covered in various ways.
Is this good for you? (please look at the snippet)
html, body {
margin: 0 auto;
padding: 0;
}
.container {
max-width: auto;
margin: 0 auto;
}
.box {
text-align: center;
border: 2px white dotted;
border-radius: 15px;
margin-top: 30px;
width: 100%;
padding: 10px;
display:inline-block;
}
.nav-pills li a {
color: black;
border-radius: 10px;
margin: 3px;
font-size: 20px;
font-weight: 589px;
vertical-align:middle;
border-radius:0px;
background-color: white;
display:inline-block;
}
.nav-pills {
position: relative;
margin-top: 20px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.center-box{
margin-left: auto;
margin-right: auto;
width: 391px;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="header" id="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<div class="box">
<h2>lewis <br />
<span>Designs</span>
</h2>
</div>
</div>
</div>
<div class="menu">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<div class='center-box'>
<ul class="nav nav-pills">
<li>
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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;
}
This question already has answers here:
How come my float elements aren't within their parent
(2 answers)
Closed 8 years ago.
The Header part of my template doesn't get the height of its nested Elements.
<header id="header">
<div id="header-inner">
<div id="top-left">
Site Title
</div>
<nav id="top-right">
<div class="menu">
<ul>
<li class="current_page_item">Home</li>
<li class="page_item page-item-2">Home2</li>
</ul>
</div>
</nav>
</div>
</header>
#header {width:100%; float:left;}
#header-inner {width:600px; margin:0 auto;}
#top-left {float:left;}
#top-right {float:right;}
I also made a jsfiddle:
http://jsfiddle.net/hqpb3cyc/
The only solution I know is to give the #header and / or #header-inner float:left; or display:inline-block; But I think thats not the right way to do this!?
Hope someone can help me
best regards
You have to clear floats. For example:
<br style="clear: both" />
#header {
width: 100%;
float: left;
background: #D3D3D3;
}
#header-inner {
width: 600px;
margin: 0 auto;
}
#top-left {
float: left;
}
#top-right {
float: right;
}
<header id="header" role="banner">
<div id="header-inner">
<div id="top-left">
Site Title
</div>
<nav id="top-right">
<div class="menu">
<ul>
<li class="current_page_item">Home
</li>
<li class="page_item page-item-2">Home2
</li>
</ul>
</div>
</nav>
</div>
<!-- clear both floats -->
<br style="clear: both" />
</header>
Addinional you can use pseudo-element :after to clear floats:
#header {
width: 100%;
float: left;
background: #D3D3D3;
}
#header-inner {
width: 600px;
margin: 0 auto;
}
#top-left {
float: left;
}
#top-right {
float: right;
}
#header-inner:after {
content: "";
clear: both;
}
<header id="header" role="banner">
<div id="header-inner">
<div id="top-left">
Site Title
</div>
<nav id="top-right">
<div class="menu">
<ul>
<li class="current_page_item">Home
</li>
<li class="page_item page-item-2">Home2
</li>
</ul>
</div>
</nav>
</div>
</header>
You should clear the floated inner element. You don't even have to change your HTML. You can do that in CSS as well by using the after pseudo element:
#header {width:100%; float:left;}
#header-inner {width:600px; margin:0 auto; border: 1px solid red;}
#top-left {float:left;}
#top-right {float:right;}
#header-inner::after{
display: block;
content: "";
clear: both;
}
<header id="header" role="banner">
<div id="header-inner">
<div id="top-left">
Site Title
</div>
<nav id="top-right">
<div class="menu">
<ul>
<li class="current_page_item">Home</li>
<li class="page_item page-item-2">Home2</li>
</ul>
</div>
</nav>
</div>
</header>
Updated fiddle
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/