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
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 ;).
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
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>
I don't understand why row class has margin-left: -20px (so it grows after parents border like on the image). I think nobody needs this behavior. Or am I doing something wrong?
<div class="container">
<div id="top-container" class="row">
<div class="span8">
<h1>App</h1>
</div>
<div class="span4">
</div>
</div>
</div>
You can use row-fluid instead of row, then your span4 and span8 won't have margin-left.
<div class="container">
<div id="top-container" class="row-fluid">
<div class="span8">
<h1>App</h1>
</div>
<div class="span4">
</div>
</div>
</div>
For people trying to find this out for Bootstrap 3:
Grids and full-width layouts Folks looking to create fully fluid
layouts (meaning your site stretches the entire width of the viewport)
must wrap their grid content in a containing element with padding: 0
15px; to offset the margin: 0 -15px; used on .rows.
Source (search for Grids and full-width layouts)
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