please see the attached wireframe. I'm using blueprint css. I want the every thing except the header to be in a 980px container.
For the header, I would like the left column to be fluid. Always growing to touch the left of the browser. How can you build a container, that has a header that is fluid on only one side?
I hope the wireframe helps explain the problem. If not please let me know. Thanks
Not sure if I have interpreted your question correctly, but I think the only way to do this is playing around with the z-index of the container and banner area.
For example, your CSS would be:
body { margin: 0; }
#container { width:980px; margin: 0 auto; z-index: 1; background-color: black; height:500px; }
#logo { width:200px; height:50px; background-color: red; }
#header-left { position: absolute; top:0; left:0; height:50px; width:50%; z-index: 0; background-color: red; }
Then for your HTML:
<div id="header-left"></div>
<div id="container">
<div id="logo"></div>
</div>
Hope this helps.
Let me see if I'm right, you want your header always to be on the top and left corner right and not affect containers position? Well why don't you just take that header out of your container, make sure your body margins are set at 0 so you header actually is completely at the top and left corner of the document and make your header have absolute position.
body {
margin: 0px;
}
.header {
width: 200px;
position:absolute;
}
.container {
width: 980px;
margin:0 auto;
}
<body>
<div class="header"></div>
<div class="container"></div>
</body>
Related
How do I make a fixed element push other elements to the side when they overlap?
I don't want this:
Or this:
I want this:
I want to know how to make the elements collide or push so that I can easily align the elements without having to position them pixel by pixel.
Edit: I tried positioning a div to be fixed and displaying it as a block, but other elements were still overlapping it. Is it even possible to push elements away from a fixed element?
Is it even possible to push elements away from a fixed element?
I would say no. Not with this concept.
I can think of two solutions that I would not recommend.
Implement it with an iframe. But I would not recommend that.
Using JS to read out the width and assign it to the neighbouring element.
I updated my question after i got a good hint. For this example i added body height 200vh; that you can scroll down to see like it works.
body {
height: 200vh;
}
.verti {
background: red;
width: 200px;
height: 500px;
z-index: 10;
position: fixed;
top: 8px;
}
.hori {
background: green;
width: 500px;
height: 200px;
z-index: 1;
position: relative;
left: 200px;
}
<div class="w">
<div class="hori"></div>
<div class="verti"></div>
</div>
Tried using float? I'm pretty new to all this but this is what I got:
<body>
<div id="container">
<div id="fixed">
<p class="center-text white">Fixed <br>Element</p>
</div>
<div id="not-fixed">
<p class="center-text white">Not Fixed Element</p>
</div>
</div>
<style>
* {
padding: 0;
margin: 0;
font-family:arial;
}
.center-text {
text-align:center;
position:relative;
top:45%;
}
.white {
color:white;
}
#container {
margin:10px;
width:700px;
height:700px;
}
#fixed {
background-color:red;
position:fixed;
width:200px;
height:500px;
}
#not-fixed {
position:relative;
background-color:green;
width:500px;
height:200px;
float:right;
}
</style>
</body>
I have this page:
http://fetr.zonedesign.ro/contact/
I have a map and a map over blue div I would like to display at center
This is code HTML:
<div style="float:left;width:100%;padding:0 10%;text-
align:center;margin:10px auto;display:block;">
<div class="date-contact">proba</div>
<?php echo do_shortcode( '[huge_it_maps id="1"]' ); ?>
</div>
This is code CSS:
#media (min-width: 800px) {
.date-contact
{
width:300px;
height:150px;
background:blue;
position:absolute;
z-index:10;
}
}
I tried to use margin: 0 auto but unfortunately not working.
Can you please help me solve this problem?
Thanks in advance!
if you want to keep its position absolute you can use calc for top/left but you need to know the height/width of your div.
Further, the parent of this blue box needs to be position relative/absolute/or fixed:
here's a demo
<div></div>
div {
background: blue;
position: absolute;
width: 100px;
height: 100px;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
My suggestion is :
wrap the two div's div#huge_it_google_map1_container and div.date-contact with a parent div. The parent div's width will be same as that of div#huge_it_google_map1_container.
So, the html will be:
<div class="map_parent_wrapper">
<div id="huge_it_google_map1_container"></div>
<div class="date-contact"></div>
</div>
The css will be as follows:
.map_parent_wrapper {
position:relative
}
.date-contact {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
.date-contact {
background: none repeat scroll 0 0 blue;
clear: both;
height: 150px;
margin: 0 auto -208px;
position: relative;
width: 300px;
z-index: 10;
}
Your Blue div is absolutely positioned so its hard to get a center aliment,
Make it relatively positioned and align center using margin 0px auto;
Now give a negative margin bottom of -208 px so that the blue div overlaps the map.
Set the required z-index so that the blue box is above the map.
-Cheers...!!
EDIT: I didn't realize you site until your edit. You should go for a position: absolute in your .date-contact style. So, my recommended code won't apply here. But you can benefit the explanations I hope.
First of all, you cannot use margin: 0 auto with position: absolute. And using classes in a seperated css file, instead of using inline styles, always help you to see your code clearly. With this seperation of concerns, you'll also be applying the DRY principle in your code.
I tidied up your code to provide your desired effect. Please see and if you'll have questions, fire away. Will try my best to help.
HTML
<div class="outer-div">
<div class="date-contact">proba</div>
</div>
CSS
.date-contact {
width:300px;
height:150px;
background:blue;
margin: 0 auto;
}
.outer-div {
text-align:center;
margin:100px auto;
padding:0 10%;
}
NEW ANSWER FOR EDITTED QUESTION
The other answers say that you should absolutely position your blue div. I say if you do that you'll never make it show in the center. The easy way of doing this, is to place your blue div in another div which is positioned absolute. Your blue div will show in center just like you wanted with margin: 0 auto; Also, I placed your blue div inside the div#huge_it_google_map1 because I believe it's where it belongs.
HTML
<div class="yourMapDiv">
<div class="outer-div" id="huge_it_google_map1">
<div class="date-contact">proba</div>
<!-- Your other divs and map contents inside the div#huge_it_google_map1 -->
</div>
</div>
CSS
.yourMapDiv {
position: relative;
background-color: yellow;
padding: 10px;
}
.outer-div {
position: absolute;
top:0;
left:0;
width:100%;
text-align:center;
background-color:red; /* Remove this attribute to see your map div (yellow) */
}
.date-contact {
background-color:blue;
width:300px;
/*height:150px;*/
margin: 0 auto;
/* or "margin: 50px auto 0" if you like to give a little margin-top for 50px */
}}
For your convenience, this is the working fiddle.
I hope you achieve what you wanted.
Blue div has position : absolute. For centered displaying you need to use left and top:
left: 50% - width block( example 40%)
top:50% - height block( example 40%)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I've tried everything to get my fotter stick to the bottom of the page, but I keep having this blank space below it.
Here is my html structure:
<html>
<body>
<div id="wrapper">
<header>
</header>
<div id="main">
</div>
</div>
<footer>
</footer>
</body>
</html>
The css:
#wrapper {
margin:0 auto;
width:1350px;
background-color:#fff;}
#main {
margin:0 auto;
width:1200px;
position:relative;}
footer {
clear:both;
background-color:#484545;
height:120px;
width:100%;
position:absolute;
bottom:0px;
left:0px;}
Things I've tried so far:
Footer inside wrapper, wrapper with position:relative, footer with position:absolute; bottom:0px. Not working, footer appears in the middle of the main content.
Footer inside body. Same as above.
Footer outside wrapper.
Pusher
Margins and paddings for #main with same height as footer.
Pretty much everything I've researched so far.
¿Any help plesase?
Thank you in advance.
PS: Sorry for my english, I'm not a native english speaker.
SOLVED: Forgotten div inside the footer with position:relative bottom:10px that made the whole footer moove a bit upwards creating this blank space below it.
You need to set the dimensions of your body to fill the viewport html, then, your absolute positioning will work:
html{
width:100vw,
height:100vh;
margin:0;
}
Alternatively as noted in the other answer - you can set position:fixed, although this will have different behavior in terms of how the element appears in relation to your other content.
body {
height: 100vh;
width: 100vw;
margin: 0;
}
footer {
height: 20px;
position: absolute;
bottom: 0;
width: 100%;
background: blue;
}
<footer></footer>
What you want is "position: fixed;" and not "absolute".
footer {
clear:both;
background-color:#484545;
height:120px;
width:100%;
position:fixed;
margin-bottom: 0px;
bottom:0px;
left:0px;}
You code is working. I have created a jsfiddle with your code and is working fine. https://jsfiddle.net/jithinnjose/270oa889/
#wrapper {
margin: 0 auto;
width: 1350px;
background-color: #fff;
}
#main {
margin: 0 auto;
width: 1200px;
position: relative;
}
footer {
clear: both;
background-color: #484545;
height: 120px;
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
}
<div id="wrapper">
<header>
</header>
<div id="main">
</div>
</div>
<footer>
</footer>
Try
position:fixed;
for footer or make a separate div for footer and assign the above mentioned css to that div
Try this magic with flexbox.
JSBIN
HTML
<div class="container">
<header role="banner"></header>
<main role="main">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</main>
CSS
html, body {
height: 100%;
min-height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction:column;
}
.container {
overflow-y: scroll;
flex: 1;
}
header[role="banner"] {
height: 48px;
background-color: purple;
}
main[role="main"] {
background-color: deeppink;
flex: auto;
}
footer[role="contentinfo"] {
flex-basis: 48px;
background-color: gold;
}
Ok guys, I fixed it!!!
My stupidity has no limits. Sometimes you just focus on trying to fix one thing and you are not looking in the right place!!
The thing was I had a forgotten div inside the footer with position:relative. That was forcing my footer to go a bit upwards, creating this blank space below it.
Thank you so much for your time, really, much much appreciated, you had no chance to solve my problem since my forgotten div was not posted here, but you did made me think outside the box.
Cheers!
This is my first time on this forum and ill try to be clear as possible, i have a problem with creating a small website for my own, specifically with the header. Im trying to create a page which has a wrapper of 1024px center (margin: 0 auto;) and i would like 2 divs, on both sides of this wrapper where i can use another picture as background. My current css looks like this:
body, html
background: url(../images/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
margin: 0;
padding: 0;
}
#wrapper
margin: 0 auto;
width: 1024px;
}
#header {
width: 1024px;
height: 254px;
background-image: url(../images/header2.png);
background-repeat: none;
position: relative;
}
#header_right {
width: 50%;
right: 0;
background-image: url(../images/header_right2.png);
position: absolute;
height: 254px;
}
#header_left {
width: 50%;
left: 0px;
background-image: url(../images/header_left.png);
position: absolute;
background-position: right;
margin-left: -512px;
height: 254px;
}
and my html looks like:
<body>
<div id="header_right"></div><!--End header right!-->
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
</body>
What i'm trying to accomplish is to have a header that continues on both left and right (both headers use different backgrounds), in this case it does work on the left, because im using a negative margin, since i use 50% width and exactly the half of the wrapper (-512px), this works, but if i would try to use a negative margin on the right (margin-right: -512px) this will extend the page on the right with an extra 512px, which is not my intention.
I've been googling all day but can't seem to find any answer to my question, also tried to make 3 divs with float: left , but couldnt figure out how to make 1 in the center with a width of 1024px and the rest 100% width, if anyone could help me out that would be really appreciated.
Kind regards
I am not entirely sure how you want it to look like, but I'll give it a shot.
If I'm way off, perhaps you could provide me with a schematic of sorts?
In any case, the example given below does not use your specific code, but it should give you an idea of how it's done.
Result:
The left and right headers are "infinite", in that they always fill the entire page's width.
The middle header covers up the rest. If you've got background images you can use background-position to position them so that they align with the middle header's left and right edges.
Code | JSFiddle example
HTML
<div class='side_wrapper'>
<div class='left_header'></div><div class='right_header'></div>
</div>
<div class='header'></div>
<div class='content'>
Content here
</div>
CSS
.header, .side_wrapper, .left_header, .right_header{
height: 100px;
}
.header, .content{
width: 400px;
margin: 0 auto;
}
.side_wrapper{
width: 100%;
white-space: nowrap;
}
.left_header, .right_header{
width: 50%;
display: inline-block;
}
.left_header{
background-color: blue;
}
.right_header{
background-color: lightblue;
}
.header{
position:absolute;
top: 0;
left: 50%;
margin-left: -200px;
background-color: red;
}
.content{
background-color: green;
text-align: center;
}
You want the two header out of the wrappper and aside of it right?
If im right, try this:
<body>
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
<div id="header_right"></div><!--End header right!-->
</body>
and :
display: inline; float: left;
in each element(header-left, header-right, wrappper), and get out of the negative margin
In you divs use float:left; this should mean that within a wrapper as long as there is enough space they will float next to each other for example
css:
#divWrapper
{
width:500px;
float:left;
background-color:red;
}
#divLeft
{
width:250px;
float:left;
background-color:blue;
}
#divRight
{
width:250px;
float:left;
background-color:green;
}
Html
<div id "divWrapper">
<div id = "divLeft">content here</div>
<div id = "divRight">content here</div>
</div><!--this is the end of the wrapper div -->
A really good tool to use for manipulating css is Firebug in Firefox https://getfirebug.com/
if you want a centre div try this:
http://jsfiddle.net/kzfu2/1/
My Objective: To have a home page, that has a fixed, static footer. The easiest way to explain this is looking at this website, http://www.foxtie.com/. I'm trying to do something like what they have done with the fox, sticking with the footer, only, I'm wanting the entire footer to not ever move from the bottom of the actual screen.
My Code: I've changed, and unchanged, and re-changed it all. So I may be 20 steps farther than I was an hour ago. Here is what I have. (Bear with me, first post here, and I'm very rusty on the html/css).
Any help is appreciated.
The HTML:
<html>
<body>
<div id="container">
<div id="nav"></div>
<div id="content"></div>
<div id="footer">
<div id="imginthefooter"></div>
</div>
</div>
</body>
</html>
The CSS:
body {
height: 100%;
margin: 0px;
}
html {
background-color: #999;
margin: 0px;
height: 100%;
}
#container {
min-height: 100%;
background-color: #666;
position: relative;
}
#content {
overflow: auto;
background-color:#333;
}
#footer {
background-color:#000;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height:100px;
overflow: hidden;
}
#imginthefooter {
background: url(Images/Elk.png);
width:100px;
height:300px;
z-index:300;
bottom: 0px;
top: -108px;
right: -150px;
position: relative;
}
The link that Mr. Alien provided in his comment is for sticky footers. This is useful if you want the footer to appear at the bottom of the screen regardless of the amount of content on the page. What I think that you actually want is for the footer to always appear at the bottom of the page. Meaning that if you scroll down, the footer stays in place. If this is the case, you want the following code:
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
width:100%;
height:100px;
}
The fixed positioning will place the footer at the bottom of the screen permanently. To add a fixed image within the footer, you will need both a relative div and absolute div. The following code is will get you what you want.
<div id="footer">
<div id="footerContainer">
<div id="imginthefooter"></div>
. . . Any additional footer elements go here . . .
</div>
</div>
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
width:100%;
height:100px;
}
#footerContainer {
position:relative;
width:100%;
height:100px;
}
#imginthefooter {
background: url(Images/Elk.png) no-repeat;
width:100px;
height:300px;
top: -108px; /* Position element */
right: 150px; /* Position element */
position: absolute;
}
The relative container within the fixed element will allow you to position the elk image relative to that container.