I'm trying to center my sections within the 'content' div but can't seem to find a way to do so.
I also like to know why the 'content' div has no height even though there are elements within them.
Basically I want the three column section boxes to be in the center.
Any help will be much appreciated, thanks.
http://jsfiddle.net/VE72c/
body {
margin:0px;
padding:0px;
}
#container {
background-color:Silver;
width:1024px;
margin:auto;
padding-left:10px;
padding-right:10px;
padding-bottom:20px;
min-height:100%;
position:absolute;
left:0;
right:0;
}
#content {
font-family:Arial, Helvetica, sans-serif;
color:#664E44;
background-color:red;
}
section {
color:#24292E;
width:300px;
height:500px;
float:left;
margin-right:10px;
margin-bottom:10px;
background-color:#A8B1B1;
padding:4px;
}
You can use display:inline-block on the sections so that they expand the parents height (#content) an use text-align:center; to center them horizontaly.
See this
FIDDLE
CSS :
body {
margin:0px;
padding:0px;
}
#container {
background-color:Silver;
width:1024px;
margin:auto;
padding-left:10px;
padding-right:10px;
padding-bottom:20px;
min-height:100%;
position:absolute;
left:0;
right:0;
}
#content {
font-family:Arial, Helvetica, sans-serif;
color:#664E44;
background-color:red;
text-align:center;
}
section {
color:#24292E;
width:300px;
height:500px;
margin-bottom:10px;
margin-right:10px;
background-color:#A8B1B1;
padding:4px;
display:inline-block;
}
Add these, and remove float: left from your section CSS.
#content {
overflow: auto;
text-align: center;
margin: 0 auto;
}
section {
display: inline-block;
}
JSFIDDLE DEMO
Related
Hi i'm doing the a basic layout and i have a problem with my css.
I have a footer tag set, but it doesnt appear at the bottom it appears a the midway point in the page.
Here is my CSS code
My "footer" doesn't appear at the foot if the page ?
I think it might be the height and width i have set but i'm not sure what to set it as prperly.
Thanks in advance
body
{
background: url("http://ulyssesonline.com/wp-content/uploads/2011/12/darkwood.jpg");
height: 100%;
width: 100%;
}
#social {
float: right;
background-color:black;
}
#social1 {
float:right;
background-color:black;
}
#wrapper,#header,#main,#footer
{
width:100%;
}
#wrapper
{
width:960px;
height:720px;
margin:0 auto;
}
#header
{
height:100px;
background:#000;
}
#main
{
height:750px;
background:#666;
}
#footer
{
margin-bottom:-50px;
height:50px;
background-color:red;}
}
Replace the footer with:
#footer
{ position:absolute;
bottom:0;
width:100%;
height:50px; /* Height of the footer */
background:#6cf;
background-color:red;}
The tutorial used: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
This is my full CSS:
body
{
background: url("http://ulyssesonline.com/wp-content/uploads/2011/12/darkwood.jpg");
height: 100%;
width: 100%;
}
#social {
float: right;
background-color:black;
}
#social1 {
float:right;
background-color:black;
}
#wrapper,#header,#main,#footer
{
width:100%;
}
#wrapper
{
width:960px;
height:720px;
margin:0 auto;
}
#header
{
height:100px;
background:#000;
}
#main
{
height:750px;
background:#666;
}
And this is how i referenced it from the html:
<footer id ="footer">Some footer text</footer>
I suspect you did not reference it correctly, with the proper id from your div?
I think I see your problem. In the footer css code you have the following:
#footer
{
margin-bottom:-50px;
height:50px;
background-color:red;}
}
Pretty sure the margin-bottom being a negative number is the issue. Change that to 5 or 10 and see if it appears.
i got it thanks for all your help.
i got this from summer codes answer above
#footer
{ position:absolute;
bottom:0;
width:100%;
height:50px; /* Height of the footer */
background:#6cf;
background-color:red;}
and i had to change the main section to
#main
{
position:relative;
height:100%;
background:#666;
}
I've searched the forum and tried a lot of the suggestions that were already made, but I can't seem to center my site navigation.
I'm using a website builder with access to the CSS, so my knowledge is somewhat limited. I would like to maintain the same width of the navigation across the page, but I would prefer for the actual navigation selections to be centered.
Does anyone have any suggestions (preferably simply suggestions since I don't really know what I'm doing). Here is my CSS:
.sf_navigation {
clear:both;
margin:0 auto;
width:auto;
min-height:38px;
height:auto!important;
height:38px;
font-family:Arial;
font-size:13px;
position:relative;
z-index:1000;
}
.sf_navigation ul {
margin:0;
padding:0;
list-style-type:none;
height:1%;
}
.sf_navigation ul li {
margin:0;
list-style-type:none;
display:inline;
float:left;
position:relative;
}
.sf_navigation ul li a {
display:block;
font-weight:700;
padding:12px 37px 0;
text-align:center;
text-decoration:none;
border-right:solid 0;
background-repeat:repeat-x;
height:25px;
width:auto!important;
white-space:nowrap;
width:1%;
}
.sf_navigation ul li a:hover {
text-decoration:underline;
background-repeat:repeat-x;
position:relative;
}
.sf_navigation:after,.sf_navigation ul:after {
content:".";
display:block;
visibility:hidden;
height:0;
clear:both;
}
.sf_navigation .widget_header {
display:none;
}
Add this to sf_navigation CSS
.sf_navigation {
display: table;
}
I have a wrapper that contains an unordered list of banner images, these are going to be a jQuery slider. However, instead of hiding the inactive images using overflow:hidden I want to have the images display inline and overflow the containing <div>, how do I go about doing this?
#slide-wrapper{
width:760px;
float:left;
position:relative;
ul{
margin:0;
padding:0;
position:absolute;
li{
list-style-type:none;
margin:0;
padding:0;
width:760px;
height:340px;
display:inline;
}
Hey now change your code according to this:
#slide-wrapper {
width:760px;
float:left;
position:relative;
}
ul {
margin:0;
left:0;
top:0;
overflow:hidden;
padding:0;
position:absolute;
}
li {
list-style-type:none;
margin:0;
padding:0;
width:760px;
height:340px;
float:left;
}
Edit: Didn't see your message about using LESS CSS, amended.
#slide-wrapper {
width:760px;
float:left;
position:relative;
overflow:hidden;
ul {
margin:0;
padding:0;
position:absolute;
top: 0;
left: 0;
li{
list-style-type:none;
margin:0;
padding:0;
width:760px;
height:340px;
float:left;
}
In this I want the div #intro to float below the div #navtop.
At the moment it hovers below on the right side.
<style>
#wrapper {
width:850px;
height:auto;
margin:auto;
font-family:Arial, Helvetica, sans-serif;
}
#header {
height:100px;
width:850px;
margin:0;
margin-top:25px;
background:url(img/header.png) no-repeat #000 ;
border:2px #000 solid;
}
#navtop {
width:auto;
height:45px;
float:left;
background:#000;
padding-right:8px;
}
#navtop a {
width:500px;
margin:0px;
margin-left:8px;
padding-left:4px;
padding-right:4px;
color:#FFF;
padding-bottom:0px;
text-decoration:none;
}
#logo {
height:40px;
width:40px;
margin-left:4px;
}
#navtop a:link {
background:#666;
}
#navtop a:hover {
color:#999;
}
#intro {
width:auto;
height:auto;
float:left;
background:#666;
margin-top:70px;
padding:4px;
border:2px #000 solid;
}
#about {
width:500px;;
height:auto;
float:right;
background:#666666;
margin-top:25px;
padding:5px;
border:2px #000 solid;
}
h2 {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
margin:0px;
padding:0px;
}
body {
background:#999;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navtop"><img id="logo" src="img/logo.jpg" alt="logo" width="40" height="40" />
Home
About
tour
photos
contact
</div>
<div id="intro">
<img src="img/djpic.jpg" width="300" height="450" alt="pic" /></div>
<div id="about"> <h2>DJ TECHIE LUNCHBOX</h2>
<p>DJ Techie Lunchboxis the current dj who knows what an audience thinks , her upside down skiiny fettish style sjing will
leave any with a head without for for chips and shandy . chocolate malnurishment bring a chip bang mismosh to her long term goals
.</p>
.
</div>
</div>
</body>
It's because you have float: left; on #intro.
Try this:
#intro {
width:auto;
height:auto;
clear:left;
float:left;
background:#666;
margin-top:70px;
padding:4px;
border:2px #000 solid;
}
#about {
width:500px;;
height:auto;
float:left;
background:#666666;
margin-top:25px;
padding:5px;
border:2px #000 solid;
}
edited to make the #about div float next to #intro div.
If you still want that floated to the left of whatever the other box (I assume you do), try adding a clear: left to the #intro CSS. This will cause the box to break down to below whatever element is causing it to move to the right and start a new line.
#intro {
width:auto;
height:auto;
float:left;
background:#666;
margin-top:70px;
padding:4px;
border:2px #000 solid;
clear:left;
}
don't use float:left on #navtop. It wants to line #navtop and #intro divs beside eachother
I am not 100% sure I understand what you are trying to accomplish but i will take a stab at it
you could target your #navtop with a rule
#navtop{clear: right;}
or simply remove the float: left from the #intro
either one of these will move the #intro under the nav
however if you want the intro to be next to something you will have to use clear:right on navtop
The first ModalPopupExtender appears in the center of the screen, when i show the second ModalPopupExtender it appears bellow and to the right of the first one (though above the first one).
I want to place it in the center of the screen.
Update:
I found that the problem with second popup was:
PopupDragHandleControlID="pnlDragMe"
if i remove this, it's ok.
but i need the drag-control!
This is my drag panel:
<div id="pnlDragMe" class="pnlDragMe">
Image Uploader
</div>
and it's css:
.pnlDragMe
{
background-color: #4D676A;
height: 24px;
cursor: move;
width: 100%;
text-indent: 10px;
}
Page Layout CSS:
/* General styles */
body {
margin:0;
padding:0;
border:0;
width:100%;
background:#fff;
min-width:600px;
font-size:90%;
}
a {
color:#369;
}
/* column container */
.colmask {
position:relative;
clear:both;
float:left;
width:100%;
overflow:hidden;
}
/* 2 column left menu settings */
.leftmenu {
background:#FFD8B7;
}
.leftmenu .colright {
float:left;
width:200%;
position:relative;
left:195px;
background:#fff;
}
.leftmenu .col1wrap {
float:right;
width:50%;
position:relative;
right:200px;
padding-bottom:1em;
}
.leftmenu .col1 {
margin: 0 5px 0 205px;
position:relative;
right:100%;
overflow:hidden;
}
.leftmenu .col2 {
float:left;
position:relative;
/*width:170px;
right:185px;*/
width:170px;
right:190px;
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
}
Jquery center plugin
This works for me very well