I am not sure why I am having such an issue with this, but I cannot get a container to show 100% width and have it at the bottom of the parent element.
I am wanting the home-img-text-container2 and its description to be at the bottom of the image container and for it to be 100% width of the image.
Just like where the arrow is:
What I have done is changed the position of the containers to absolute:
#home-img-text-container1, #home-img-text-container2 {
position: absolute;
}
Then modified the width and placed it at bottom:0
#home-img-text-container2 {
bottom: 0;
width: 100%;
}
In addition the before:
#home-img-text-description2:before {
width: 100%;
}
The modifications I made are in the max 640px viewport media query.
What am I doing wrong to not get the container2 div to be placed at the bottom of the image and be 100% of the width of the image?
See the fiddle to see what I have done.
Fiddle
Try this, if you have the home-img-text-container2 element inside of a container, place it out the outside like so
...
</div> <!-- End of main container -->
<div class="home-img-text-container2"></div>
</body>
Then in your css:
.container{
min-height: calc(100vh - 80px);
}
The 80px is the height of whatever your home-img-text-container2 element is I just used 80px as an example. Make sure you have spaces either side of the "-" as well
calc(100vh-80px); will not work
I tried recreating your page and everything worked fine. here is the code:
<html>
<head>
</head>
<body>
<style>
#home-img-text-container1, #home-img-text-container2 {
position: absolute;
}
#home-img-text-container2 {
bottom: 0;
width: 100%;
}
</style>
<div id=home-img-text-description1>
<div id=home-img-text-container2>
Text inside the container2
</div>
</div>
</body>
Related
I'd like to create a web page with a really, really large scrollable content area.
However it seems like once the size gets too large browsers stop displaying the full content area correctly. e.g.
<div id="scrollable">
<div id="visCont">
<img src="https://media.glamour.com/photos/5a0399bd8948116a5c05be65/master/w_644,c_limit/kaley-cuoco-the-big-bang-theory-penny-season-11-2017.jpg"> </img>
</div>
<div id="invisibleContent">
<p>
text
</p>
</div>
</div>
#scrollable {
overflow-y:auto;
}
#visCont {
top: 6710000px;
position:absolute;
}
#invisibleContent {
top: 6720000px;
position:absolute;
}
Here if you scroll all the way to the bottom you will see the image and the text displayed fine at the bottom of the div:
https://jsfiddle.net/L7c8bmpm/11/
However here because the content is so far down from the top, the the text is cut off in Chrome, and you don't even get the white div background at the bottom. In IE, it seems like the text isn't displayed and the image is at the very bottom.
https://jsfiddle.net/ww5yu6nh/10/
is there a way to fix this? or is this just a limitation of most web browsers these days as it's not expected that anyone would need a div this tall?
It should all render fine and in my browser (Chrome v65) I can see both elements just fine, but I think your approach is wrong.
Your parent div with id scrollable has a height of 0. Because the elements within are positioned absolute they receive their own stacking context and the parent div collapses. The scrollbar you currently see is actually on the body.
A better approach would be this:
#scrollable {
height: 6720000px;
position: relative;
}
#visCont {
bottom: 1000px;
position: absolute;
}
#invisibleContent {
bottom: 0px;
position: absolute;
}
https://jsfiddle.net/afe6odw3/1/
The scrollbar is still on the body, but your parent div does have an actual height now.
I have edited your code try this one
this is only an example
note tag is no close
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body, html {
height: 100%;
}
.image{
/* Full height */
height: 100%;
width: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<img src="https://media.glamour.com/photos/5a0399bd8948116a5c05be65/master/w_644,c_limit/kaley-cuoco-the-big-bang-theory-penny-season-11-2017.jpg" class="image">
<p>
text
</p>
</body>
</html>
I want to make a card which contains an image and some texts. The text should be put over the image. So I put all of them in a .container which has position: relative with themselves set to position: absolute.
For the text:
the 1st part of the text sits at the left side with the wrapper .row-start, one by one in a row
the 2nd part of the text sits at the right side with the wrapper .row-end
of course both within the container
Html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Color-blue.JPG"/>
<div class="row-start">
<p>Attr 1</p>
<p>Attr 2</p>
</div>
<div class="row-end">
<p>Attr 3</p>
</div>
</div>
</body>
</html>
Css:
.container {
position: relative;
height: 15em;
}
.container img {
width: auto;
height: 100%;
}
.row-start {
position: absolute;
left: 1em;
display: flex;
flex-direction: row;
}
.row-end {
position: absolute;
right: 1em;
}
What's the problem
What confuse me is that it seems .row-start can work while .row-end doesn't honor its .container parent at all. And it will be placed outside the .container div and from the right side of the page (so it honors the
<html> tag?)
What am I missing or doing something wrong here?
And any best practice for doing this? Thanks
Your container element is a block, so it's size it's the size of the screen. I have added a background: red to your container so I can show you what i mean
You can see it on this pluckr:
https://plnkr.co/edit/QdsaqIU5X7xYX4UXksT9?p=preview
.container {
position: relative;
background: red;
}
Your .container DIV doesn't have a width definition, so it's 100% wide, i.e. full width (of its parent / in this example of the window). The height is 15 em, which apparently is more than the height of the image.
So your absolute DIVs are positioned in relation to the .container, but that container is larger than you apparently think it is - the image only covers part of the container div.
To change that, you can define a width for the container, and 100% width or the image.
In this case,I had created a static footer and the element inside the div like button(which alway at the bottom),I had managed to make the height of the div bigger but found that is no efficient to used while the element inside the div was increased and expended.Is it some suggestion else to make it dynamically?thanks.
The sample output might look like this:
When you say static, do you mean a fixed position at the bottom of the window? If so then whatever your height, e.g. 20px, make that the value of the bottom-padding for the main area, then anything in the main area will be padded equally by the height of the footer and will be seen.
Here is a working model for you on JSFiddle.
In HTML, there are 2 divs, "wrapper" and "footer", like:
<div id="wrapper">
line 1 <br />
</div>
<div id="footer">
footer text
</div>
In CSS:
html, body {
height: 95%;
}
#wrapper {
min-height: 100%;
margin-bottom: -1.5em;
padding-bottom: 1em;
}
#footer {
position: absolute; !important
bottom: 0;
}
I would like to build a fluid layout and would like to achieve something like
width:100%-200px;
i.e. have a div with content, call it div id="content" with a fixed margin on either side. I have tried to use the trick of putting the div id="content" into another div container with a margin, but I don't know how to fill out the background of div id="content". Is there a way of telling the div id="content" to use 100% of the available space as background, such that the width of the content plus the width of the margin does not exceed 100% of the browser window size?
Having the DIV set to be 100% with a margin of XXX on either side won't work as that will exceed the size of the browser window.
You could try the following:
body {
padding:0 2%;
}
#content {
width:96%;
}
http://jsfiddle.net/YYhvT/
Use position absolute...
#content {
position: absolute;
left: 0;
right: 200px;
}
See my Fiddle.
PS Advantage is that you don't need values on other elements.
You can put a container around the content and give it 200px left/right padding. This should do the trick (at least, from what I understand of what you are trying to accomplish). Also see this code example:
<!doctype html>
<html>
<head>
<style type="text/css">
body { margin: 0 50px; }
#container { padding: 0 200px; background: #FF0000; }
#content { width: 100%; background: #00FF00; }
</style>
</head>
<body>
<div id="container">
<div id="content">
Here goes my content
</div>
</div>
</body>
</html>
Note that the body margin is just for illustrating purposes, to let you see the background differences.
(I would post a jsFiddle, however I am not able to use it since I can only use IE7 at this point.)
here is my solution,
html:
<div id="content" class="content">
My Content
</div>
css:
.content {
position: absolute;
right: 100px;
left: 100px;
background-color:#A5112C;
}
and link to it: http://jsfiddle.net/MPYHs/
also if you want to put sort of image as a background I suggest you use small pattern like https://ssl.gstatic.com/android/market_images/web/background_stripes.gif
hope it helps,
regards
I have been trying to get this right for days but I just can't.
My scenario is this: I need three columns of equal height. There needs to be borders between them. The left column will have a bit more content than the other two and the other two need to have buttons at the bottom (that are positioned so that their bottom edge is where the left column's content ends).
Here is an image that shows what I mean: http://img217.imageshack.us/img217/6400/49593032.png
I have tried the huge-padding-bottom-and-equally-huge-but-negative-margin-bottom-hack which works great until I try to move the buttons down. At first I tried to use absolute positioning on the button and position:relative on the container but since the container needs overflow: hidden to work the button will be hidden and placed at the bottom of the container (which is about 32767 pixels down due to the huge padding).
I also tried using the above hack while adding a second row which I put the buttons in. Besides the fact that the semantics of that don't make much sense, this method made it so that the content of the left column doesn't go all the way down. Since the hack required overflow: hidden attempts to use negative margins to push the second row up didn't work out either.
So I'm stuck here. Faux columns wouldn't help me and javascript is not an option. What would you do?
Use A List Apart's Holy Grail and position the buttons absolutely.
Don't really like it in this case, but at least one solution would be to use a table. The text height in the first column would force the height for the other cells, and you could use relative positioning inside the cells (with a div) to have the buttons at the bottom.
[removed code --- not 100% sure about your exact requirements]
You can use absolute positioning for your divs and then absolute position the buttons in them. Try this code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body { height: 100%; margin: 0; }
.col {
width: 33%;
position: absolute;
top: 0;
bottom: 0;
border: 1px solid #000;
background: blue;
position: absolute;
}
.left { left: 0; }
.mid { left: 33.33%; }
.right { left: 66.66%; }
.button { position: absolute; bottom: 0; right: 0; }
</style>
</head>
<body>
<div class="col left">
sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg
</div>
<div class="col mid">
sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg
<button class="button">click me</button>
</div>
<div class="col right">
sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg
<button class="button">click me</button>
</div>
</body>
</html>