I created a doc page using Flare and forced breadcrumbs to stay fixed below the top nav. The page works as it is, but I want the div to stretch across the page.
Please see current design below:
Click to see example screenshot
I can stretch the div to 100% if I remove the min-width in the child div, but it stretches only to the right, while keeping the breadcrumbs where I want. Example below:
Click to see example screenshot
Or I can make it stretch 100% by adding left:0; on the parent div, but then the breadcrumbs move out of place. I can use margin-right or right to position the div to desirable areas, but div does not sync with the rest of the content when resizing browser.
Try this:
*{
padding:10px;
}
.parent {
margin:auto;
width:300px;
background-color:red;
}
.breadcrums {
background-color:blue;
}
.full-width {
background-color: green;
position:relative;
width:100vw;
left:50%;
transform:translateX(-50%);
}
<div class="parent">
<div class="breadcrums">breadcrums</div>
<div class="full-width">full-width element</div>
</div>
The important part here being position, width, left and transform on .full-width.
Applied the css " left " property if that div has "absolute" position.
Thank you for your replies. Here are the html and css:
Html:
<div class="crumbs_wrapper">
<div class="MCBreadcrumbsBox" >
<span class="MCBreadcrumbsPrefix">You are here:</span>
B1
<span class="MCBreadcrumbsDivider"> B2 </span>
B3...
</div>
</div>
CSS:
div.crumbs_wrapper
{
position: fixed;
float: none;
width: 100%;
z-index: 1;
}
div.MCBreadcrumbsBox{
padding-bottom: 5px !important;
padding-top: 18px !important;
padding-left: 10px !important;
float: left;
position: relative;
margin-top: -12px;
background-color: #FFF;
z-index: 999;
width: 100%;
max-width: 104.5em;
box-shadow: 1.5px 1.5px 15px #888888;
}
Th tool I use is Flare, which does not have the fixed breadcrumbs feature. Breadcrumbs are automatically generated; I only changed the CSS values and added an extra div with the .crumbs_wrapper class. Other classes are automatically generated by the software.
If I remove the max-width the div only stretches to the right, and if I add left: 0; to the parent div, the breadcrumbs move to the left. I can bring the breadcrumbs to the position where I want using margin, but it does not stay fixed when the browser is resized. Also, the paddings and margin-top are used to keep the breadcrumbs below the top nav and aligned with the rest of the content.
Related
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%)
I have an div element with variable height which I need to be positioned by it's bottom relative to the containers top.
This must be done without changing the html.
e.g.
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
h1's bottom should be 100px below #container's top.
Thanks a lot
EDIT:
So by Request what I did (or didn't) tried:
Searching with Google for css bottom top position relative but that's not the best search terms in the world...
Normally I would put a container around h1 and give it a height of 100px but then I would need to change the html and that I can't
using bottom: somevalue but that positions the element's bottom relative to the container's bottom.
slain some vampires
You could make use of transform: translateY(-100%), to make the bottom of the element relative when you apply margin-top: 100px to h1.
#container {
width: 200px;
height: 200px;
background: tan;
overflow: hidden;
}
#container h1 {
transform: translateY(-100%);
margin-top: 100px;
background: papayawhip
}
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
Depending on browser support requirements:
#container {
position: relative;
}
#container h1 {
position: absolute;
bottom: calc(100% - 100px);
}
Example
Only way through it is to add a height to the h1 unless you want to go with calc which isn't supported yet by some browsers. Then set your top margin to be top: 100px - h1's height. Hope this works
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
#container {
width: 300px;
height: 300px;
background: #222;
overflow: hidden;
}
#container h1 {
background: #444;
position:relative;
height:80px;
top:20px;
}
http://jsfiddle.net/ms889w57/
#container
{
position: absolute;
height: 100px;
bottom:0px;
}
This code is not affecting html at all. I added css for id-container.
An absolute position element is positioned relative to the first parent element that has a position other than static. You can change it to fixed it you wants to.
Height of the container, help you to calculate spacing from bottom.
The HTML for my page:
#header {
background-color: #0cf;
border: 1px solid black;
height: 20%;
width: 100%;
}
#menu {
background-color: #ff0;
color: black;
font-size: 1.5em;
height: 29%;
width: 70%;
margin-top: 9%;
}
<div id="header">
<div id="menu">
this is menu
</div>
</div>
The problem is that the "#menu" has its margin relative to "body" element I want its margin to be relative to "#header".
You can probably see that i am creating a fluid grid here, and margin of my "#menu" div should be relative to the "#header" otherwise it will not work(see the screen shots).
Here are the screenshots.
First one at resolution of 1024*768.
Second is at resolution of 1280*1024
In second screenshot the "#menu" is a little high from the bottom of "#header".
My question is how can i apply a margin which changes as the height of "#header" changes?
I have already read about the "margin collapsing" thing but i don't think this is what's happening here,as my parent div has a border.
the 9% that you used in #menu { margin-top: 9%; } means 9% of ducument size which is all maximum browser window .
use position:relative for both #header and #menu . then give top:9% to #menu .
The percentage height property in CSS can only be applied to elemets whose parent's have a position other than static.
Just add position: relative to #header and you should good to go!
I usually solve this problem by using:
position:absolute;
top: xxx px; /* (or bottom, left, right) */
I making a animation on set of DIV's which are wrapped inside div with id="wrapper"
using CSS3.
However if I hover on the rounded box, the animation is left aligned but not center aligned.
The URL for the code is #http://jsfiddle.net/X5Ycu/
<div id="wrapper">
<div class="roundedbox"></div>
<div class="ball"> </div>
<div class="greenball"> </div>
<div class="redball"> </div>
<div class="greenleaf"> </div>
<div id="pacman"> </div>
</div>
Thanks & Regards
Alex
change the blocks from inline-block to display: block
add margin 0 auto
remove the position absolute
quick fiddle here
http://jsfiddle.net/ktcle/X5Ycu/2/
#wrapper{
position:relative;
width: 400px
}
.roundedbox{
position:relative;
width:75px;
height: 75px;
background-color: pink;
display: block;
text-align: center;
margin: 10px auto;
border-radius:10px;
transition-property:border-radius width;
transition-duration:2s;
transition-timing-function:linear;
}
Try below:
div.roundedbox:hover{
width:100px;
left: 137.5px; //Add this line
}
You can add margin applied effect like TOP and BOTTOM also RIGHT and LEFT to these two applied to half the original size
see that example: http://jsfiddle.net/X5Ycu/1/
.limeball{
margin: 0px; // original margin
width: 100px; //original width
height: 50px; //original height
}
.limeball{
width: 0px;
height:0px;
margin: 25px 50px;
// margin results:
// (original width) / 2 = 50px (LEFT AND RIGHT)
// (original height) / 2 = 25px (TOP AND BOTTOM)
}
Well, if you use modern CSS as you say, then you could specify:
left: 50%; /* or figure out where the center is */
And then just move the element to its half size to the left, which you can do using transform:
transform: translateX(-50%);
So now, even when your element is changing its size, also its position (translation) will change according to its size. This (the translation) will always work, regardless of how your element is positioned or displayed.
You will surely need to use some vendor prefixes.
I am trying to make a footer that spans the width of a page minus 10px on the left and right. I am trying to do this by giving the body a padding on all sides of 10px. In the code below the header works just fine, but the footer is ignoring the body padding on the right side. Why is it doing that and how can I fix it?
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding:0;
margin:0;
}
body {
margin: 0;
padding: 0 10px;
}
#header {
height: 150px;
width: 100%;
margin: 0 auto;
background: #333;
}
#footer {
position: fixed;
bottom: 5px;
width: 100%;
background: #f63;
text-align: center;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="footer">I am the footer!</div>
</body>
</html>
your footer not ignoring body padding, look through console at that element sizes and you will see that width of your footer is 100% of window width + 10px from left padding + 10px from right padding.
you can use calc function in css: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
#footer {
width: calc(100% - 20px);
}
JSFiddle
Footer width and padding are calculated separately. You can use use box-sizing: border-box to prevent this from happening
Use this for all elements to behave this way
* {
box-sizing: border-box;
}
There is a good video by Travis Neilson on his YouTube channel DevTips, where he explains the box-modal concept.
#footer {
position: fixed;
bottom: 5px;
left: 10px;
right: 10px;
background: #f63;
text-align: center;
}
demo: http://jsbin.com/benosofo/3/
A fixed element is not fixed in relation to the body, it's fixed in relation to the window. If it would be fixed in relation to the body then it would be just as absolute positioning, and it would scroll with the body.
You can make a fixed container for the footer, so that you can use a padding on that.
HTML:
<div id="footercontainer"><div id="footer">I am the footer!</div></div>
CSS:
#footercontainer {
position: fixed;
bottom: 5px;
width: 100%;
padding: 0 10px;
}
#footer {
background: #f63;
text-align: center;
}
None of the solutions in the net worked for me. so I solved it another way. I was trying to create a modal for adding address and was testing it on the mobile mode. I wanted a fixed layer with rgba(0,0,0,0.75) to cover all the window and in the center, a white form appear for the user. the form header was hiding in the top (and unscrollable) and in the bottom, was sticking to the bottom of window which was not looking good (in some cases, some element won't work when they don't have enough space from the window borders).
so I solved the problem by putting a div after the form div in the bottom (to stick to the window bottom instead of my form) and made it transparent. so it worked! (I have to mention that I am writing react code)
this is my div:
<div className="modal-padding"/>
and this is my styling for this div:
.modal-padding {
width: 100%;
border: 10vh solid transparent;
}
I used one, before the form div and one after that.
Be careful. I tested giving a width: 100vw and height: 10vh to the div but when it has no content, it doesn't work, seems it doesn't exist at all. so I gave a border.
I hope this solve your problem too, or give you an idea for solving the issue.
Good luck.
You could make a wrapper for your footer and apply the 10px padding to that instead.
#footer-wrap {
position:fixed;
bottom:0px;
left:0px;
padding:10px;
}
and then when you place your footer inside it will be correctly padded. This way is the most backwards compatible solution as it doesn't rely on css3 calc.
JSFIDDLE
http://jsfiddle.net/pk8uU/