I am trying to move from old html styled with tables, to html5 styled with CSS, but I have problems:
codepen Demo
You can see that, text is aligned to the edge of the page, and I want it aligned to the edge of the header banner.
I cant figure out, how to do that? without using tables.
Also, please note, that the .article:nth-child(odd) CSS selector, somehow aligns the odd elements to the left, and not to the right... I dont understand why.
Thanks!
The best way to create a fixed width website is to add a containing div:
Simply add a fixed width div around all your current code.
#Wrap{width:1024px;}
.
<body>
<div id="Wrap">
...
/* rest of website */
...
</div>
</body>
codepen Demo
CLEAN EXAMPLE
HTML
<div id="Wrap">
<div id="Head"></div>
<div id="Body"></div>
<div id="Foot"></div>
</div>
CSS
#Wrap{
width:1024px; /*Your desired page width*/
margin:0 auto; /*Center your wrapper on the page*/
}
#Head{
width:100%; /*Fill the width of the wrapper*/
}
#Body{
width:100%; /*Fill the width of the wrapper*/
}
#Foot{
width:100%; /*Fill the width of the wrapper*/
}
For example
codepen Demo
.article {
width: 1024px;
}
To center the .articles you need to set a width. Also you might want to consider getting rid of
<div align="center">
It's deprecated in html5
Your content have the same width as a header, but you have image inside header which have a little less width than 100% of site, so what u need to do is add some width for article something like this:
.article {
display: block;
margin: auto;
width: 900px;
}
codepen Demo
you need to write css to style the page correctly:
codepen Demo
div {
text-align: center;
}
Related
I creating an new layout for a personal website.
I'm using Twitter Bootstrap 3, and my initial layout was made using as exemple
the "Bootstrap with sticky footer" sample (http://getbootstrap.com/examples/sticky-footer-navbar/)
This is my html:
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page navigation -->
<nav id="nav-container" class="navbar navbar-default container" role="navigation">
<div class="container">
<!-- Here I put a very normal Bootstrap 3 navbar -->
</div>
</nav>
<!-- Begin page content -->
<div id="main-container" class="container">
<!-- All my content goes here! -->
</div>
</div>
<!-- Begin page footer -->
<footer id="footer" class="container">
<div class="container">
</div>
</footer>
</body>
The Sticky Footer CSS:
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -100px;
/* Pad bottom by footer height */
padding: 0 0 100px;
}
/* Set the fixed height of the footer here */
#footer {
height: 100px;
}
And the custom style for my layout:
body {
/* Body's background will be grey */
background-color: #C0C0C0;
}
#main-container {
/* A box where I'll put the content will be white */
background-color: #FFFFFF;
}
#wrap {
height: 100%;
min-height: 100%;
}
#main-container {
min-height: 100%;
height: 100%;
}
This code generate this layout:
But, as you can see, the div #main-container don't grow 'till the end of the layout.
The div keep with the height of his content.
What I want is that this div always fills the entire page, like this:
Many solutions on internet said me to fix min-height to some tested value, but this way
I'll not be able to keep my website responsive (it's very important to me keep my layout
always responsive, that's the main reason I use Bootstrap 3).
Other solution goes to calculate the div height with javascript. Personally I don't like
this solution. I whish I could solve this only by using CSS.
Someone knows how to solve this problem?
As long as you are working on percentage, your site will be responsive. So using
min-height:100% does solve your problem which is just CSS. And if you don't want Javascript involved here, that is the way to go.
See the JS Fiddle DEMO. Your container is filling the entire page.
#main-container {
min-height: 100%;
background: #fff;
}
If you want to have sticky footer AND fullheight #main-container, you have to modify your structure. First, let me explain why you can't solve this with the sticky-footer method you're using right now:
Setting #main-container's height:100% or min-height:100% won't work because you can't use percentage height with a parent whose height is not strictly defined. Note that in the currently accepted answer this is considered a bug but it is not, it's just the way it is supposed to work. In your example #wrap's height is set to auto, so #main-container height just ignores the 100% and fallsback to auto.
To have both sticky footer and REAL fullheight #main-container (instead of faking with background) you have to use display:table and display:table-row. This works because when you use display:table, height:100% works just as your regular min-height:100% and the display:table-rows inside will always stretch to use all the vertical space available.
NOTE: this is different from using html tables, because in this case you don't need to bloat your markup with non-semantic tags, as you'll see in the following example.
Here's the example HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="maincontainer" class="astable">
<div id="header" class="astablerow">
header
</div>
<div id="middlecontainer" class="astablerow">
content
</div>
<div id="footer" class="astablerow">
footer
</div>
</div>
</body>
</html>
And here's the CSS
html, body{
margin:0;
padding:0;
height:100%;
}
.astable{
display:table;
height:100%;
table-layout:fixed;
width:100%;
}
.astablerow{
display: table-row;
}
#header{
height:30px;
background-color:#00ff00;
}
#footer{
height:30px;
background-color:#0000ff;
}
#middlecontainer{
background-color:#ff0000;
}
I think that min-height doesn't work due to a reported bug. See this: stackoverflow.com/questions/8468066.
An easy way to create the illusion that #main-container grows till the end, is to set #wrap's background-color the same value as #main-container's.
I have a page with content contained in <html></html> - I'm trying to get a sidebar to span all the way down to the bottom of the page, even if there's vertical overflow.
This is working if there's no vertical overflow, but if there is, the sidebar just stops at wherever the bottom of the page was when the page loaded.
If I use chrome dev tools, I can see that all elements - all the way up to <html>, have their height limited to however big the window was when it loaded. Is this normal? My problem would be solved if I could tell <html> to somehow span vertically to include all content, but I don't know if that's the right solution.
I have set the sidebar and all parents to height:100%, including html:
html, body, .durandal-wrapper, #shell-row, #sidebar {
height: 100% !important;
}
I've been working on getting this demod in jsfiddle but can't get it working. here's what it looks like on my end:
You could use css tables to achieve this.
FIDDLE1 FIDDLE2
Markup
<div class="container">
<div class="sideBar">sideBar</div>
<div class="main">
Content.
</div>
</div>
CSS
.container
{
display: table;
}
.sideBar
{
display: table-cell;
background:pink;
width: 100px;
}
.main
{
display: table-cell;
background:yellow;
overflow:auto;
vertical-align: top;
}
Faux columns is the usual CSS pattern for your issue:
http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns
I want to add space in the HTML document like the ones inside the orange rectangle. I don't know the technical term for what it's professionally called. Apologies.
If you are looking to center your web page and you are using a fixed width on your main container this can easily be achieved.
CSS
.container {
margin:0 auto; /* this will center the page */
width:960px; /* use your width here */
}
HTML
<body>
<div class="container">
<!-- all your great content here -->
</div>
</body>
If you need help applying this to your html/css please post your html and I would be glad to help you.
Why not do this? :
<style type="text/css">
html, body {
margin: 0;
border: 0;
width: 100%;
}
body {
padding: 0 20px;
}
#main {
margin: 0 auto; /* in case you want to set a fixed width on this as well */
}
</style>
<body>
<div id="main"></div>
</body>
This way, depending on the width on the window, the main div will resize and there will always be a fixed space on both sides. If you want the main div have a fixed width and the spacing on the sides to be resized automatically, use the other solutions.
Those would be margins. But your better option would be to wrap the main area in a div or other block element/sectioning root, set it to the width that you want, and then center it with margin: 0 auto;
you need margins. set the style to margin:0 auto; that will center your div
I am working with someone else's styling, and can't get things as they managed to. I am trying to make things look like this page:
http://www.comehike.com/outdoors/parks/add_trailhead.php
See how the image is nicely on the right, and the form elements are on the left.
I have this page that I am messing with and trying to make similar:
http://www.comehike.com/account/member_home.php
Is there an easy way for me to make the image go to the far left, and the stuff asking the person to log in, to be on the right?
Thanks!
Start with changing the width on the first div within .basic. Change the width to 100% instead of 450px
You should be able to continue from there.
I would also move the image into it's own container and float that right, and put the form actions in another container. Also, make use of classes and ids for styling to clean things up.
Here is how you can make food use of floating elements:
HTML:
<div class="container">
<div class="form">
<form>....</form>
</div>
<div class="leftImage">
<img src="img.jpg" />
</div>
<div class="clear"></div>
</div>
CSS:
.container {
width: 800px;
}
.container .form {
width: 500px;
float:left;
}
.container .leftImage {
width: 250px;
float:left;
}
.clear {
clear:both;
}
Replace the div with width: 450px to width: 100% then the child H3 float: left
increase the width to 845px for the div.
Float image to the left.
for the h3 tag do the styling
h3 {
float: right;
display: inline;
}
This will do the task for you.
Remove the empty tags from the HTML.
I have the following HTML to build a 900 pixel wide, centered page, with a header, footer and content section:
<body>
<div id="mainMaster">
<div id="main">
<form runat="server">
<div id="header">
</div>
<div id="content">
</div>
</form>
</div>
</div>
<div id="footer">
</div>
</body>
The layout is styled with the following (approx) CSS:
html, body
{
height: 100%;
}
#mainMaster
{
min-height: 100%;
background: url(../Images/Background.png);
}
#main
{
width: 930px;
margin: 0 auto;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header
{
}
#footer
{
background-image:none;
background-color:White;
position: relative;
margin-top: -80px; /* negative value of footer height */
margin-left: auto;
margin-right: auto;
width: 930px;
height: 80px;
clear: both;
}
#content
{
position:relative;
overflow:hidden;
height:100%;
background-image:none;
background-color:White;
}
The CSS was originally based on a layout I found on the internet for 'sticky footers'. It worked perfectly with a sticky footer, but then I came across these problems:
1) The 'content' is never stretched to full size. This is a big problem on some of my pages because internal controls are set to a height of 100%. Since content isn't stretched, the controls show up all squeeshed.
2) I just added a background image and colour. This background should not show up in the middle content panes. Because the 'content' isn't fully stretched I get the background image showing in the wrong places.
I prefer a CSS only fix for this (ie. no hacks or JS). Any help?
I would expect removing the #mainMaster <div> and moving its background image into #main's CSS would sort your problem out:
<body>
<div id="main">
<form runat="server">
<div id="header"></div>
<div id="content"></div>
</form>
</div>
<div id="footer"></div>
</body>
The problem you're running into is that #main's parent (#mainMaster) doesn't have an explicit height declared. Percentage heights only work properly when the elements parent has a height defined.
Try using min-height CSS property to set a minimum height for your content.
Adding a specific background color to #content and #header should prevent the background image from displaying in those areas. Not sure why the content isn't filling up the area, when you say "stretched" do you mean to a height of 100%? Browsers won't recognize a height of 100% without using js.