I working on a project and i have little problem with the div,
the scenario below:-
section.portfolio
.flex.flex--center
.col-1
.img-strip
.col-1.order-first
p.home-lead.outdented Lore ipsum
a(href="#").home-cta See More
http://codepen.io/alb_dev/pen/KaxMVv
I have put in codepen you can see the problem i have:
The pink div i want to put side to the div who have text and the button element
i want to put the file like this on the photo
but when i put the div pink in:-
.img-strip
position: absolute
background:pink
top: 0
margin: -50px 0
width: 100%
height:100%
and the div parent in :-
position:relative
the div in pink disappear you can see on codepen i have post.
Hope i have explained well my problem if not please let me know!
Use position: fixed instead of position:absolute
There are some basic problems with the structure of the code. Since you already have a grid-system in place using the method you are is not recommended. So from what I could understand of your problem, the following is the solution.
HTML old
<div class="col-1">
<div class="img-strip"></div>
</div>
HTML
new
<div class="col-1 img-strip">
CSS old
section.portfolio .img-strip {
position: absolute;
background: pink;
top: 0;
margin: -50px 0;
width: 100%;
height: calc(100% + 100px);
}
CSS new
section.portfolio .img-strip {
background: pink;
width: 320px; /* Depending on what width you want col-1 has a maximum width if 320px */
height: 200px;
}
Related
I've just spent 3 or 4 hours trying to understand how to get a "symmetric" DIV inside an HTML page that has to be not scrollable.
The DIV must have the same margins from the window on all sides and must contain an IMG whose size should scale according to the window size maintaining it's ratio.
At the following link you can find the best I've been able to do.
As you can see the DIV has the right margins on the left, top and right size but not on the bottom one! Why not?
Is there something wrong with the DIV style?
<div style="margin: 50px;">
I hope it's quite clear, thank you for your help! :)
Edit: since on JSFiddle it doesn't appear as it should be I've just uploaded an image about what I get on my browser:
Edit 2: this is the link to the last working solution, thank you all for your help, in particular to dcardoso. :)
You should add to your body and html tags (doesn't work in jsfiddle) and remove 'overflow: hidden':
position: relative;
height: 100%;
and to your div tag (remove 'margin:50px'):
box-sizing: border-box; /*This allows for the div padding to be included in the height and width size */
height: 100%;
padding:50px;
The page is getting cut because you are using overflow: hidden; for html and body .
when adding style tag inside jsfiddle style, it is not working. so scroll is visible.
Ahhh, I think I get what you're saying. If the page is longer than your div the space on the bottom is greater than the 50px margin.
You have a couple of choices here, this is just one of many.
I'm using calc() to calculate the 100% width/height minus the 50px on each side.
html, body {
margin: 0px;
overflow: hidden;
}
.maxSizeElement {
width: calc(100vw - 100px);
height: calc(100vh - 100px);
margin: 50px;
}
/* OR YOUR COULD USE... */
.maxSizeElement {
position: absolute;
width: 85vw;
height: 85vh;
top: 0;
right: 0;
left: 0;
bottom:0;
margin:auto;
}
<body>
<div>
<img class="maxSizeElement" src="https://thelostdigit.files.wordpress.com/2014/05/wp_ss_20140507_0002.png" />
</div>
</body>
I've been looking into mimicking some websites to learn some new neat techniques.
And while doing so, I came up with some trouble emulating a certain site.
http://dangblast.com/ heres the link to the site.
If you look at the top of the website there is a div that contains a background image that has an "absolute" position and a "background-size" that covers and my question starts here.
Right underneath that div, there is another div (id = "about") that follows up right after and surprisingly the div always comes right after even if the window size is changed.
From my understating, I thought that it was impossible to stack an "abosolute" or "fixed" positioned div right after another, they just become layered.
Is there a trick to achieving this type of effect?
right now I have a div in my website that looks like the following
The Html
<div id = "fill_screen">
</div>
<div id = "followup_div">
</div>
The CSS
#fill_screen {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#followup_div {
background-color: yellow;
height: 500px;
width: 100%;
}
Is there a way to make divs fit right under a absolute or fixed positioned div that is also filling up the window of the screen? That is dynamic to the web-browser size?
I did some research and there were techniques using viewports height (vh), but I saw that some old browsers were not compatible with it.
You have to modify the position of the followup_div. The followup_div uses absolute positioning and has to be moved 100% from the top.
HTML:
<div id = "fill_screen">
<button>text</button>
</div>
<div id = "followup_div">
</div>
CSS:
body {
margin:0px;
}
#fill_screen {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
right:0;
bottom:0;
background-color:red;
}
#followup_div {
background-color: yellow;
height: 500px;
width: 100%;
position:absolute;
top:100%;
}
DEMO
If you take a look at the top of id="intro" you can see class="intro-down". this anchor makes space for fixed div and if you remove it you can see that id "intro"(which is a fixed div) will be disappeared.
I have the following code:
<div style="position: absolute; width: 100%; height: 100%; background-color: #00FF00">
<div style="position: relative; left: 300px; top: 45px; height: 100%; width: 100%; background-color: #FF0000;"></div>
</div>
Screenshot:
Why does the div gets pushed outside of the viewing area and hence showing the scrollbars. If you check toward the top right corner, the black area is the extension when the red div moved.
How can I edit it so the red div has the top and the left position but doesn't extend beyond the page width and height?
To actually answer the "why" of the question:
The reason you're getting scroll bars is that the relative positioned div inside of the absolute is set to 100% width and height, but ALSO is displaced (in this case, by top and left)
It is therefor assuming 100% width/height of the parent container AND displacing it, causing it to be too large.
By adding overflow:hidden, you seemingly solve this issue, but any content past that will be clipped, not actually fitting inside the dimensions you have set.
Another way to do this would be something like...
top: 10%;
left: 10%;
width:90%;
height:90%;
You could just as easily substitute top and left for padding/margin of that direction.
You can use CSS3's calc() function to set the second div's height and width to be the same as the first one's, minus the left and top offsets. This will also allow you to use position: absolute in your text, aligning it to the right:
<div style="position: absolute; width: 100%; height: 100%; background-color: #00FF00">
<div style="position: relative; left: 300px; top: 45px; height: calc(100% - 45px); width: calc(100% - 300px); background-color: #FF0000;">
<span style="position: absolute; right: 0; top: 50%;">TESTING THIS OUT</span>
</div>
</div>
Check the working JSFiddle. I also added a CSS reset to get rid of the body margins that the browser might add. If you want to use this reset in your HTML file, create a <style> tag inside your <head> tag, with the code that is showing in the CSS section in the JSFiddle. If you don't want to use the entire reset, the only actually relevant part is body { margin: 0px; }, so you can also add style="margin: 0px;" to your body tag.
I am trying to design a website, where I want a div of 100% height inside a element and then some other div inside it, formatted in a specified manner.
the code I am trying is this
css
#main1{
margin: 0 auto;
width:300px;
background: red;
position:absolute;
}
#content1{
top:0;
width: 300px;
height: 250px;
background: gray;
}
#content2{
width: 300px;
height: 250px;
background: yellow;
}
#content3{
width: 300px;
height: 250px;
background: brown;
}
#bottom{
width: 300px;
height: 75px;
position:absolute;
bottom:0;
background: blue;
}
and I have designed it like this
<td width="300" valign="top" style="position:relative; height:100%">
<div id="main1">
<div id="content1">/*****Content1****/</div>
<div id="content2">/*****Content2****/</div>
<div id="content3">/*****Content3****/</div>
<div id="bottom">/*****Content4****/</div>
</div>
</td>
I want the div with id content1 at extreme top and with id bottom at extreme bottom inside td, so that if the height of the element varies it automatically get aligned at top and at bottom with margins in between the inner divs, also I want this to be all browsers compatible.
I tried and it worked in IE.
I have tried so many codes but couldn't get the solution
You can see in this link at right side that where and what I am trying to make
http://www.spoiledagent.com/about_hanu.html
Thanks
First, I'd ask that you display the whole of the HTML markup for the body structure. A small snippet doesn't give an accurate picture of the entire structure that could be affecting your undesired result.
Second, I'd recommend you don't use tables for site layout. It's bad practice for a variety of reasons. Here's a Q/A with supporting arguments.
Third, you have to remember that every element that you make has a parent, right up until the <html> tag. So, let's say I wanted the main container of my site to have 100% height to the window.
Let's say this is the only other element besides <html> or `'.
<div id="container">
<h1>Why you no touch the bottom?</h1>
</div>
with this CSS:
#container {
background: #ccc;
height: 100%;
}
http://jsfiddle.net/BvNY4/
In this fiddle, we can see it doesn't to to 100% height. Why? Well...technically, it is...but it's parent isn't. So like a brave Tee-Ball coach, we need to tell this element's parents what to do:
html, body {
padding: 0;
margin: 0;
height: 100%;
}
http://jsfiddle.net/B6RH7/1/
Ta-da! Let me know if you need anymore clarification on how this applies to your scenario. :)
A little more directed at your specific goals, try this article explaining position: relative; for parent elements. If the parent element has attribute position: relative;, any child elements with position: absolute; will position themselves to the parent element.
Need some help with making the following layout work in IE:
Light gray is a browser window. Dark gray is the main content area, centered against the window. To its left is a fixed width yellow box, and to its right is a variable width green box. The yellow+blue+green triplet is then repeated down to the bottom (it's basically a simple blog layout).
I got this working in Firefox/Chrome by using negative margin-left and floating all three colored boxes. The IE does not understand it. Tried padding dark gray area on both sides by the width of the yellow box (and then do the overflow: visible, white-space: nowrap in the green box) - still no go.
Any ideas or pointers? What the hell does the IE understand?
Thanks
Alex, the trick here is pretty simple. Position those two *fixed_size* and *var_size* containers absolutely within #main. Give #main relative positioning. Then given the two absolutely positioned containers negative left and right margins, respectively.
Should certainly work in IE
Good luck and let me know if you need additional help
EDIT: this is the code that is also visible in the Fiddle:
<div id="main">
lorem ipsum
<div id="left">
</div>
<div id="right">
</div>
</div>
and the CSS:
#main {
margin: 0 auto; position: relative; height: 300px; width: 400px; background: gray;
}
#left {
position: absolute; width: 100px; height: 75px; left: -100px; background: red;
}
#right {
position: absolute; width: 100px; height: auto; right: -100px; background: blue;
}
Obviously, use the appropriate ways to center a div in IE with:
body {
text-align: center;
}
#main {
text-align: left; margin: 0 auto;
}
EDIT2: Check out the updated jsFiddle.. Hopefully that is something like what you wanted: http://www.jsfiddle.net/2avM7/3/
You should start with a master container, that is wide enough to visit all 3 containers from left to right, so like this:
<div id="container" style="margin: 0 auto;">
<div id="fixed_size>Content goes here</div>
<div id="main_content" style="margin: 0 auto;">Center content</div>
<div id="variable_size_container">Content for that goes here!<div>
</div>
margin: 0 auto; does the trick here, it centers a div in the center of its parent div.