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
Related
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 ;).
I have the below HTML in this fiddle http://jsfiddle.net/v6E9a/ .The issue is that the footer is overlapping with the body.If I change the body position to relative then it all lines up correctly but I need to have absolute there to support some other functionality.
I m really not that good with CSS.Can someone please have a look at the html and tell me how i can line the head body and footer correctly.
<div id="s4-workspace" style="width: 1920px; height: 748px; overflow:scroll">
<div id="s4-bodyContainer" style="position:relative">
<div class="headerSection" style="position:relative ;border : 3px solid red">
<div class="globalHeader">
header
</div>
</div>
<div>
<div id="contentRow" style="position:relative">
<div class="fixedWidthMain" style="position:relative">
<div class="fixedWidthMain" style="position:absolute ;border:3px solid blue">
main data
</div>
</div>
</div>
</div>
</div>
<!--PAGE FOOTER SECTION-->
<div class="pageFooterSection" style="clear: both;position:relative ;border:3px solid green">
footer
</div>
</div>
Absolute take up no space, and that's why the footer is on top. There are many ways to work around this. if your main fx, have a fixed height, you can add that value as a margin-top to your footer.
fixed-main height fx 400px
pageFooterSection gets a margin-top of 400px
I want the second child div to stay on the same line as the first div no matter how much a browser window is resized. Both images are parts of the header (the green div). I have tried to follow other questions asked on here and tried whitespace:nowrap, float:left, changing blocks from inline to inline-block and back, and nothing has helped.
I want to learn, the simplest, cleanest way to implement this, without using hacks, because after reading a bunch of tutorials I obviously still don't understand how this works.
<div style="background:green;">
<div style="display:inline-block;">
<img src="" width=150 height=80>
<br>
Some text
</div>
<div style="display:inline;">
<img src="" width=728 height=90>
</div>
</div>
Try this:
<div style="background:green;position: relative;">
<div style="display:inline-block; position: absolute; left: 0; top:0;">
<img src="" width=150 height=80>
Some text
</div>
<div style="display:inline; position: absolute; left: 50%; top: 0;">
<img src="" width=728 height=90>
</div>
</div>
Here you can use the flex property.
<style>
body{
display:flex;
}
.container{
width:100%;
display:flex;
flex-direction:row;
}
.container > div{
width:50%;
background:#ccc;
border:thin solid #000;
}
</style>
<!doctype html>
<html>
<body>
<div class="container">
<div>
your first image here
</div>
<div>
your second image here
</div>
</div>
</body>
</html>
I have found a stupidly simple solution: it's to include two parent divs instead of one. The first one has flexible width and serves for filling the entire top of the screen with header background/color. The second one is fixed width, wide enough to contain both images. This second container "traps" both images inside the fixed width and does not allow them to carry over.
The first sub-container is inline block (so I can include "Some text" under it), and the second one is regular inline. This way I can add padding or margins to the sub-containers.
I am not a programmer and realize this solution may be frowned upon, but it's the only one that worked :) No floating left/right, absolute positions, white-space nowrap or div clear was required!
<div style="background:green";>
<div style="width:1000px;">
<div style="display:inline-block; padding-left:15px; padding-right:40px">
<img src="" width=150 height=80>
<br>
Text under the header
</div>
<div style="display:inline;">
<img src="" width=728 height=90>
</div>
</div>
</div>
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/.
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