I have a container which contains a top region and a bottom region. The top region contains two additional divs which (later on) will contain dynamic content. The bottom is a absolute positioned div, which ALWAYS should be positioned in the bottom, no matter how much content the top section contains, the bottom should be pushed down. For some reason I dont know, it fails. Can someone help me out?
My HTML looks something like this:
<div class="container">
<div class="top">
<div class="left">
<h3>
some left header
</h3>
<p>
some left text
</p>
</div>
<div class="right">
<h3>
some right header
</h3>
<p>
some right text
</p>
<p>
some right text
</p>
</div>
</div>
<div class="bottom">
<p>
some bottom text
</p>
<p>
more bottom text
</p>
</div>
and my CSS:
.container {
position: relative;
border: 1px solid black;
min-height: 255px
}
.top {
display: flex;
border: 1px solid black;
}
.left {
float: left;
border: 1px solid red;
}
.right {
float: right;
border: 1px solid green;
}
.bottom {
position: absolute; // here the issue appears
bottom: 0; // here too
}
I have a JSFiddle how it should look like or what I want to achieve
Additionally I have a JSFiddle how it looks with the position absolute div.
How about adding the height property with the value 100vh to your container.
height: 100vh;
If you remove the position: relative; from .container the absolute positioned element will remain at the bottom.
Related
I want to make the following element.
Basically an image in top of a page layout, and then a box on top of that image, containing a header and some more text.
But, what is the most optimal way of doing this in regards to responsiveness. I imagine something like the following markup
<div class="header">
<img src="myimage.png" alt="" />
<div class="text">
<h1>Header</h1>
<p>Lorem ipsum</p>
</div>
</div>
And then set .header to position relative, img to max-width of 100%, and .text to position absolute, bottom: -50%, left: 10% etc.
But this does not scale well, and absolute position seems to me, to be a bit invalid in regards to responsiveness. Also, there is content below the element, that should move accordingly to the amount of text, in the text element. If if is positioned absolute, that gets more tricky to manage.
Any ideas to another approach?
Try this:
img {
border: 2px solid black;
}
#container {
position: relative;
}
#example {
position: absolute;
top: 10px;
left: 10px;
padding: 5px;
background-color: white;
border: 2px solid red;
}
<div id="container">
<img src="http://i34.tinypic.com/4tlkci.jpg">
<div id="example">This is my div</div>
</div>
I have a grid of white divs with a green div behind
(like this).
I am trying to put text in each div, but for some reason, when I give a div text, that div is shifted down (like this). What css property/ HTML technique can I use to make the divs stay in place while still holding text?
The HTML consists of a div with this CSS:
#main {
top: 50px;
height: 280px;
width: 100%;
background-color: green;
position: fixed;
}
which contains divs with this CSS:
.small {
position: relative;
background-color: white;
border: 4px solid black;
width: 5%;
height: 80px;
display: inline-block;
margin-top: 2px;
}
and looks like this:
<div id="main">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<!-- etc -->
</div>
They are aligned at their baseline. If there is text, that's the baseline of the text (i.e. of the last line of text), if not, it's near the bottom of the container.
Add
.small {
vertical-align: top;
}
to change this.
Here's a codepen: http://codepen.io/anon/pen/oxVajG
I'd like to know how to get the following result:
Green is a container div 700 pixels wide. Blue is a title area which fills the green container width-wise with some title text centred in the middle. Red needs to float on the right without affecting the flow of the text in the title.
How do I achieve this? I've tried floating the red box on the right but it seems to push the text in the title to the left for some reason.
Edit - For the record, I hadn't posted an example because HTML and CSS isn't really my area of expertise and I'm struggling to get back to an example where the text didn't align (having tried half a dozen different methods I've been reading).
Here's roughly what I was trying: http://jsfiddle.net/3fgytw0u/
<!DOCTYPE html>
<head>
<title></title>
<style>
#Container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
#Title {
background-color: red;
text-align: center;
}
#GameGuidelines{
align:right;
width: 200px;
background-color: grey;
}
</style>
</head>
<body>
<div id="Container">
<div id="Title">
<h1>This</h1>
<h2>Is</h2>
<h2>A</h2>
<h2>Long</h2>
<h2>Title Title Title Title</h2>
</div>
<div id="GameGuidelines">
<ul>
<li>Some</li>
<li>Info</li>
<li>Here</li>
</ul>
</div>
<div id="Introduction">
<p>Rest of the page continues here</p>
</div>
</div>
</body>
</html>
Move the element up into the header, set it to position:absolute and give it a margin-left:500px;
http://jsfiddle.net/3fgytw0u/2/ <-- that one is right
Maybe it would help you: Link
#Container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
position: relative;
}
#Title {
background-color: red;
text-align: center;
}
#GameGuidelines{
text-align:right;
position: absolute;
right: 0;
top: 0;
width: 200px;
background-color: grey;
}
Alternative approach to positioning can be using negative margin-left equal to width of red area:
h2 {
padding: 10px;
background: #EEE;
text-align: center;
overflow: hidden;
}
h2 .right-block {
width: 50px;
height: 50px;
background: coral;
float: right;
margin-left: -50px;
}
<h2>
Some centered text
<div class="right-block"></div>
</h2>
Here is what you want.
<html>
<head></head>
<body>
<div style="border:green 1px solid;height:700px;" >
<div style="border:blue 1px solid;width:100%;height:200px;text-align:center">
Some Title Text
<div style="float:right;border:1px red solid;width:100px;height:100px;margin-right:5px;position:relative;">
Some text
</div>
</div>
</div>
</body>
</html>
Red div will float on the right inside the blue one.
That could be simply done by positioning the inner div as position: absolute and putting it right: 0px, but because you need to prevent that it does not start to be positioned with the main display instead, you put position: relative to the outer div too. Also make sure that while writing you put the red div first and then the div which has purple text, or you can just add top: 0px so that you don't care about that anymore.
Then it should work!
Here's a fiddle: http://jsfiddle.net/xg6rove7/
But be wary of the fact that any text in the red box can then overlap the text in the purple, as I have tried to show you in the fiddle. You might b better with using a padding for both sides equal to the box's width, or just use your plain old float: right
I am aiming for a setup similar to this:
Unfortunately I end up with this:
Here are my specs:
I'm trying to get divs with an image to be set up without borders, and divs with text to have a 1 px border.
Here are the divs I set up:
<section id="row2">
<div id="textBox1" class="column left">
<p> TEXT BOX 1 </p>
</div> <!--#textBox1 .column.left-->
<div class="column right">
<img src="assets/top-right-image.png"/>
</div>
</section> <!--#row2-->
<section id="row3">
<div class="column left"><img src="assets/bottom-left-image.png"/></div>
<div id="textBox2" class="column right">
<p> TEXT BOX 2 </p>
</div>
</section> <!--#row3-->
As you can see, I set up the text divs with an id "textBox1" and "textBox2". Unfortunately, this blows them up and makes the div.column.left in #row3 to align to the right.
here is the CSS:
.column {
float: left;
position: relative;
margin: 20px 11px;
}
.left {
width: 408px;
}
.right {
width: 449px;
}
#bannerPic {
padding: 0px 15px;
}
#row2 div {
height: 352px;
}
#row3 div {
height: 598px;
}
#textBox1 {
border: 1px solid #BCBCBC;
margin-bottom: 20px;
}
#textBox2 {
border: 1px solid #BCBCBC;
}
Where am I going wrong?
Chances are the top two items are not the exact same height, so the 3rd item, the taller photo, is "hanging" on the first. This happens because of the way float behavior works. Make sure the parts of each row (the divs) are rendered to the exact same height, including all borders, margin, padding, etc.
The other option is to "clear" the section tags. Since part of your content is text, this may be a lot easier. It's probably easier anyway. :)
section { clear: both }
Try adding a style cascade for:
section {
clear: both;
}
to clear out the floats and reset each row to the margin.
This is what I'm trying to achieve
http://i.stack.imgur.com/e9xZa.jpg
I tried this
jsfiddle.net/RUSm3/
but as you can see the date overlaps on the image.
So I added left:215px for the date
jsfiddle.net/9aw29/
It looks good but perhaps I don't have an image. How can I get the date back to the far left? I'm trying to achieve this without php.
If you have a div like this
<div class="container">
<div class="date">today</div>
</div>
with this css fragment your date div will be positioned to the bottom right of it's container.
.container {
position:relative;
width: 100px;
height: 180px;
border: solid 1px black;
}
.date {
bottom:10px;
position:absolute;
right:10px;
}
You can verify it working here
I'm not sure what your markup is, but the easiest solution would be to have the heading, text and date all in one div (inside .entry), and float the image to the left if it's there. The date would be positioned as you have already done in your example. When there is no image, the entire div will move flush left.
<div class="entry">
<img [...] />
<div>
<h2>Heading</h2>
<p>Entry text</p>
<p class="date">[Date]</p>
</div>
</div>
Here is what I came up with and will probably be a good jumping-off point for you. In short, wrap the two text areas in their own divs, and wrap them in a parent div. Float the parent div to the right and make it's position something other than static. If the position is static, you cannot use the position: absolute attribute with it's children divs.
<style type="text/css">
div.entry{
float: left;
position: relative;
width: 40%;
}
img.left{
float: left;
}
div.right{
float: right;
display: inline;
position: absolute;
height: 100%;
width: 50%;
}
div.topRight{
}
div.bottomRight{
position: absolute;
bottom: 0px;
}
</style>
<div class="entry">
<img class="left" src="http://www.google.com/logos/2010/halloween10-ires.gif"/>
<div class="right">
<div class="topRight">
Some stuff
</div>
<div class="bottomRight">
Some other stuff
</div>
</div>
</div>