Let's say I have a this markup:
<div id="container">
<div id="header">content</div>
<div id="left-column">content</div>
<div id="right-column">content</div>
<div id="footer">content</div>
</div>
The #container is centered and fixed at 1000px, #header and #footer are 1000px, and #content-left and #content-right are floated left, at 500px each.
How do I extend the header and footer background colors the full length of the browser window if the container is fixed?
First, change a little your html structure. While you're there, why not using html5 for header and footer elements.
Html
<header>
<div class="container">
content
</div>
</header>
<div class="container">
<div id="left-column">content</div>
<div id="right-column">content</div>
</div>
<footer>
<div class="container">
content
</div>
</footer>
Css
Than, in the Css, set the header and footer width to 100% and make them de color you want. In this example red. Than use a class .container that will make the content wherever you put it (header, main section, footer) display in the middle of the screen, but without any background color.
header, footer{display:block; width:100%; background:#ff000; margin:0; padding:0;}
.container{width:1000px; margin:0 auto;}
Hope this help :)
The header and footer divs need to be outside the container div.
Apply the background colour to a wrapper around the header/footer.
html
<div id="header-wrapper">
<div id="header">content</div>
</div>
<div id="container">
<div id="left-column">content</div>
<div id="right-column">content</div>
</div>
<div id="footer-wrapper">
<div id="footer">content</div>
</div>
css
#header-wrapper{width:100%;height:xxx;background:#3399ff}
#header,#footer{width:1000px;margin:0 auto}
The accepted answer is really a bad way to accomplish this. HTML is used for semantic meaning of the content. Removing your header from your container is not semantic! Here's a much better way of doing this that still preserves the semantic content: http://css-tricks.com/full-browser-width-bars/.
Related
I am currently designing a website and need to know if I can use container tag inside a container-fluid tag? Is it a good design approach to use that.
You can do this if you want, though it is generally not necessary, as their primary purpose is to be an external wrapper. The main thing to be aware of is the 15px padding on either side of a Bootstrap container, as well as their varying max-width media queries.
When nested, a child .container will not fill the width of the screen at any point.
Bootstrap Containers overview.
Bootstrap.css Source Code. Open this, ctrl + f and search .container, .container-fluid, and the sm, md, lg, and xl container sizes to see how they are styled.
Open the following code snippet example in Full Page mode and re-size to see their effects within .container-fluid, without .container-fluid, and with several .container divs nested within eachother.
.container-fluid {
background:pink
}
.container, .container-sm, .container-md, .container-lg, .container-xl {
border: 1px solid black;
background: lightblue;
}
.not-a-bootstrap-container {
background: orange;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container-fluid">
<h2>
Within container-fluid
</h2>
<div class="container">
.container
</div>
<div class="container-sm">
.container-sm
</div>
<div class="container-md">
.container-md
</div>
<div class="container-lg">
.container-lg
</div>
<div class="container-xl">
.container-xl
</div>
</div>
<div class="not-a-bootstrap-container">
<h2>
Without container-fluid
</h2>
<div class="container">
.container
</div>
<div class="container-sm">
.container-sm
</div>
<div class="container-md">
.container-md
</div>
<div class="container-lg">
.container-lg
</div>
<div class="container-xl">
.container-xl
</div>
</div>
<div class="container-fluid">
<h2>
Multiple nested containers (within Container-Fluid)
</h2>
<div class="container">
<div class="container">
<div class="container">
Three .container divs nested within eachother in a .container-fluid
</div>
</div>
</div>
</div>
Yes, you can use the container tag inside of a container-fluid tag. It all depends on the needs. Let say you have a scenario where you want to make the navbar of full screen width and page content to be in a single centered container.
There is nothing like bad approach in this.
Basically, I need to put a back-to-top button at the right side of the footer.
Something like this:
What I get is this:
You can see that there is a blank space between footer and the end of viewport, that space is the height the back-to-top button, if I remove the button the blank space is removed too.
I'm using bootstrap so my html code is similar to:
<footer class="container-fluid">
<div class="container">
<div class="content1>CONTENT 1</div>
<div class="content2>CONTENT 2</div>
</div>
<div class="back-to-top>TOP</div>
</footer>
You can see an example in Bootply. You can see that the footer has to be 20px height (min-height: 20px) but instead it is 40px.
I think that my problem will be solved if I can put the .back-to-top div beside the .container div.
How can I get this?
You can use helper class pull-right and move TOP link before container:
<footer class="container-fluid">
<div class="back-to-top pull-right">TOP</div>
<div class="container">
<div class="content1>CONTENT 1</div>
<div class="content2>CONTENT 2</div>
</div>
</footer>
You need to remove your CSS bloc:
.back-to-top {
float: right;
position: relative;
top: -20px;
}
Doc: http://getbootstrap.com/css/#helper-classes-floats
Having a min-height proxy doesn't mean you footer is going to be 20px. That just mean its height won't be smaller than that. If you want your height to be 20px, use height property. If for some reason you want it to be variable, you can look to the max-height property.
For your "back-to-top" button, here is my suggestion :
http://jsfiddle.net/Bladepianist/38ne021p/
HTML
<footer class="container-fluid navbar-inverse">
<div class="row">
<div class="col-xs-6">CONTENT 1</div>
<div class="col-xs-5">CONTENT 2</div>
<div class="col-xs-1 text-right" id="back-to-top">TOP</div>
</div>
</footer>
CSS
.container-fluid {
color: white;
}
Basically, I change your "back-tot-top" class to an ID in my model but you're free to adapt it to your liking.
Using the col-system and the text-positions classes, you can achieve the same rendering as you show in your question. That way, the back-to-top button is part of the footer.
Hope that's helping ;).
Please take a look at the following fiddle:
http://jsfiddle.net/UrLQ2/
<div class="header">
header
</div>
<div class="navi_wrap">
<div class="navi">
<a href='#'>Tab1</a>
<a href='#'>Tab2</a>
</div>
</div>
<div class="wrapper">
content
</div>
The background image should have 100% width, header and content should be centered.
I'm trying to achieve the missing orange background block left to the navigation block.
What's the best approach to do this?
Remove margin:0px auto; from div.navi and div.wrapper
DEMO
Hey all, so basically I have a very simple layout with a header image, a main centered text area. And a sidebar that is to the left of the main centered text area.
This is basically how my layout looks:
<center>Header</center>
<div style="float:left;">Sidebar</div>
<center>Main Area</center>
Well the sidebar is obviously going to align all the way to the left side of the page, what I would like it to do is still be on the left side of the page, but I want it to "hug" the main centered area.
Here is a basic picture of what it looks like now, and an arrow of what I would like to happen:
http://img18.imageshack.us/img18/2307/exampleps.jpg
Live demo: http://jsfiddle.net/rRm7k/
HTML:
<div id="wrap">
<div id="header"> HEADER </div>
<div id="body">
<div id="sidebar"> SIDEBAR </div>
<div id="main"> MAIN CONTENT </div>
</div>
</div>
CSS:
#wrap { width:500px; margin:0 auto; }
#body { overflow:auto; }
#sidebar { float:left; width:150px; min-height:400px; }
Try it with all divs instead:
<div>Header</div>
<div style="float:left;width:250px">Sidebar</div>
<div style="float:right;">Main Area</div>
Here is a solution: http://jsfiddle.net/MwEun/1/
You have to fit the width of the elements to your needs but should work. This example is a really basic version of an really easy html layout.
A good and rock solid solution for centering elements is to set a width (e.g. 500px) and then adding margin: 0 auto;
I have markup that looks like this
<div>
<h1 style="text-align:center;" >Heading 1</h1>
<img style="float:left;" src="logo.gif"/>
<h1 style="text-align:center;" >Heading 2</h1>
</div>
<div>
Content goes here
</div>
The problem is that heading 2 is centered relative to the remainder of space after the image, and not to the whole div, so its not centered on the page.
If I remove the img from the flow with position:absolute, it does not push down the content and instead overlaps it.
One way is to add a right padding to the div with the size of the logo:
<div style="padding-right: 50px;">
<img style="float:left;" src="logo.gif"/>
<h1 style="text-align:center;" >Heading</h1>
</div>
<div>
Content goes here
</div>
Another way is to remove the heading from the flow. This only works on the assumption that the logo height is bigger than the heading height. Beware also that image and heading could overlap.
<h1 style="position: absolute; width: 100%; text-align:center;">
Heading
</h1>
<img style="float:left;" src="logo.gif"/>
<div style="clear:both;">
Content goes here
</div>
Solved it through trial and error. I don't know why but in my testing it only works if width is set between 12 and 80%.
So it seems "h1" is a block element, and text-align does not center block elements, it only centers inline elements inside it, which explains the "centered off-center" behavior. So it turns out the answer is the same answer to the question "how do you center a block element?"
<div>
<h1 style="text-align:center;">Heading 1</h1>
<img style="float:left;" src="logo.gif"/>
<h1 style="
text-align:center;
margin-left:auto;
margin-right:auto;
width:50%;
">Heading 2</h1>
</div>
<div style="clear:both;">
Content goes here
</div>
I know i am late for the party, but for future readers I found a different approach for that problem.
use 3 div elements (left div,middle div, right div) inside a flex displayed div container.
make the left and right div the same relative width (in %) and float each one of the to his side.set the middle div width with reminder of 100% - (left div + right div).
locate the image in the left div (or right div if your direction is RTL).
set the text align of the middle div as 'center'.
check this example. also here is a Plunker .
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
#editorheader {
display:flex;
}
#leftheaderdiv {
float:left;
width:20%;
background-color:gray;
display:inline-block;
}
#middleheaderdiv {
float:left;
width:60%;
background-color:red;
display:inline-block;
text-align: center;
}
#rightheaderdiv {
float:right;
width:20%;
background-color: gray;
}
</style>
</head>
<body>
<div class="subheader" id="editorheader">
<div id="leftheaderdiv"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d"/></div>
<div id="middleheaderdiv">I AM IN THE MIDDLE</div>
<div id="rightheaderdiv"></div>
</div>
</body>
</html>
If you are really using logo image then you might try this solution:
<div>
<img style="float:left;" src="logo.jpg"/>
<h1 style="text-align:center; position:relative; left:-100px;" >Heading</h1>
</div>
where -100px replace with half of yours image width.
edit:
idea with absolute position from littlegreen's answer is working. Check it:
<div style="position:relative;">
<img style="float:left; position:absolute;" src="logo.jpg"/>
<h1 style="text-align:center;" >Heading</h1>
</div>
This most simple solution:
<h2 style="text-align:center;text-indent:-*px">Heading 2</h2>
= the logo width