How to center two columns using CSS?
Tags: html,css
Problem :
I'm trying to center two columns on my website but there are some problems. The result of every change is left position. What am i doing wrong? More on picture.
body {
background - image: url("../img/gray.png");
}
#header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: #cc0000;
text - align: center;
}
#wrapper {
margin: 100px;
width: 1280px;
}
#leftcolumn {
float: left;
background - image: url("../img/gray.png");
margin: 10px 0px 10px 0px;
padding: 10px;
height: 682px;
width: 460px;
}
#rightcolumn {
float: left;
color: #333;
border: 1px solid # ccc;
background: #F2F2E6;
margin: 10px 0px 10px 0px;
padding: 10px;
height: 500px;
width: 439px;
display: inline;
position: relative;
}
Thanks
Solution :
Since the two columns' width is less than the width of the wrapper (i.e. 959px vs 1280px), you'll need to place the two columns inside a fixed width container:
<div id="wrapper">
<div id="column_container">
<div id="column1"></div>
<div id="column2"></div>
</div>
</div>
And then do something like:
#column_container {
width: 959px;
margin: 0 auto;
}
CSS Howto..
You need to relatively position the outer <li>s. Using position: absolute positions the element absolutely relative to the closest relatively positioned element. http://jsfiddle.net/Eric/MkKWa/ Also, you misused the id in the...
You should remove the :hover state and make the animation with another html-class. E.g. .open.animateIt contains the animation. In this case you can make something like this: jQuery(document).ready(function($) { jQuery('.open').addClass('animateIt');...
you need to use the css transformation on i and span separately. i have modified your code please take a look, here is your answer. Html: <input type="text" name="name" id="input"...
You can use Content scripts that have access to the pages DOM. In your manifest.json you could have: "content_scripts": [ { "matches": ["http://www.google.com/*"], "css": ["mystyles.css"], "run_at": "document_end" } ], This...
Solved my problem! I realized that my <div> appears less than 100px in height. Adjusting the minHeight did the trick: minHeight: '60'; Cheers!...
You're thinking correctly. Using the css(map) method is the way to go. $(".cIconSmall").css({ float: "left", width: "59px", background: "transparent url('http://download.com/47.jpg') no-repeat scroll -132px -1px" }); http://api.jquery.com/css/ A map of property-value...
Instead of using the regex you could use .filter() to find the <style/> tag, from there simply use document.getElementsByTagName("head")[0] to append the HTMLStyleElement $.ajax({ type: 'POST', url: "/echo/html/", data: {...
EDIT: Well those three different elements all have different redndering rules haha. So for: table#bar you need to set the width to 100% otherwise it will be only be as...
Do not think this require any special skills. This is a very basic fluid layout. An example Markup <div id="wrapper"> <input type="text" id="firstrow_textbox" /> <input type="text" id="secondrow_textbox" /> <input type="button"...
I thought this was addressed in .NET 3.5, but I can't find any references. Anyways, here is a hand-rolled server control that allows you to specify colgroup... public class ColGroupGridView...
This issue has now been solved, for now, I think. Here is the solution: <head> <script type="text/javascript"> function noScrollBarsOnAAdUnit( ElementID ) { document.getElementById( ElementID ).setAttribute("scrolling", "no"); return true; }; </script>...
Your error just says that there is no favicon.ico on your server. It's nothing related to your code. By default html looks for the favicon on the / and with...
The problem is that your CSS is trying to target the .wrapper div that exists inside the nav:hover which isn't how you HTML is set up. You can get pretty...
The CSS rule should look like this: .list .item-avatar.list-purple { color: #FFF; background-color: #b31f6f; } Notice that there is only one space in the CSS selector....
There are several ways to override rules in CSS if you can't change the .css file in which these rules are specified. Cascade: As the name implies, in CSS rules...
Add this to your CSS -webkit-animation-fill-mode: forwards; DEMO http://jsfiddle.net/kevinPHPkevin/4TcSK/5/ Jquery example for full browser support DEMO http://jsfiddle.net/kevinPHPkevin/GyYvz/ $('img').animate({ marginTop: '250px', opacity: 0.5 }, 1000); ...
I don't have the time to test this now but here's approach that might work. Have your divs created with another class that contains incrementing numbers, ie. container-1, container-2, container-n....
Following @daniel beck comment on his answer, I got something that works: it is not perfect, header and text size have to be the same and spacing must be the...
You can use float to align the image to the right, combined with margin to place it exactly where needed, then just clear the text below the image. I've commented...
CSS3 solution - http://jsfiddle.net/UddqU/ Gradient CSS generated from - http://www.colorzilla.com/gradient-editor/ HTML <div id="wrapper"> <div id="left"></div> <div id="right"></div> </div> CSS: body {background:orange;} #left {float:left; width:25%; height:400px; background:...
The problem here is that you cannot add stuff to the parsed CSS. You can only add inline styles to a particular element. Say, you had a <div class="usrgrid">. The...
This is because it is inside an <li>, which is generally not where you want your <input> to be. You can place it outside of the <ul> and float it,...
Just put everything, including the menu, inside the same wrapping div element and set width as well as centering (margin: 0 auto) to that element. Also, CSS doesn't validate to...
if you're using jquery, you can just do $('#test').css('display','none'); That will hide the element and leave the background untouched. [Edit] I don't think I understood the question before. Per your...
Just make .pds-links display inline instead of block. http://jsfiddle.net/5YLNT/6/...
You can use the CSS 'starts with' attribute selector (^=) to select all labels with a for attribute that starts with 'red', 'green', etc. input[type="checkbox"] { display: none; } label...
You have to use responsive solution for this : solutions here
Using comments from @LowerClassOverflowian, @srekoble and @AndreiVolgin, I came up with this solution: var newDiv = $('<div></div>') .text(lines[i]) .css({ 'margin-left':(underscoreCount * 5) + 'px' }); $('#div-text').append(newDiv); Where underscoreCount is the...
Give position: relative to parent of the sub menu. The sub menu is given position:absolute and hence shows up outside. .menu_nav ul li { position: relative; } ...
One simple way to vertically align your text is to set line-height:100px on your list items. jsFiddle example li.nav { display: table-cell; vertical-align: middle; height:100%; align-items: center; vertical-align:middle; line-height:100px; }...