I am trying to place a vote counter inside a div called drop-section. I have managed to create the desired effect, which works perfectly in all cases except when I place the thing inside drop-section. When I do that, the arrows are no longer up against the top and bottom of the container. I can't figure out why the up and down arrows would move like that if they have absolute positioning. I've looked at the drop-section css and can't see any reason why it should be doing that.
Here is the html:
<html>
<body>
<div id="wrapper">
<div id="drop-section">
<div id="menu">
<a class="item" href="drop_index.php">Dead Drop</a>
<a class="item" href="add_topic.php">New Post</a>
<a class="item" href="admin/add_cat.php">New Category</a>
<div id="userbar">Hello, dude.</div>
</div> <!--menu-end-->
<!--vote-box-container up and down elements lose
abs position when vote-box-container is
inside drop section-->
</div> <!--drop-section-end-->
<!--vote-box-container works perfectly here outside the drop section-->
<div id="vote-box-container">
<div id = "vote-box">
<div class="up">
<img src="img/up.png">
</div>
<div class="down">
<img src="img/down.png">
</div>
<div id = "votes">0</div>
</div> <!--vote-box-end-->
</div> <!--vote-box-container-end-->
</div> <!--wrapper-end-->
</body>
</html>
Here is the CSS file:
#wrapper {
width: auto;
}
#menu {
clear: both;
width:88%;
margin: 0 auto;
height:20px;
background: none;
text-align: left;
font-size: .9em;
padding-bottom: 2%;
}
#menu a:hover {
background: #930c0c;
padding: 7px;
color: #fff;
}
.item {
color: #fff;
background-color: #000;
font-family: 'Play', sans-serif;
margin: 7px;
padding: 7px;
text-decoration: none;
}
#userbar {
float: right;
}
#drop-section {
background-image: url(../img/wrapper-bg.png);
background-repeat: repeat-x repeat-y;
border-style: solid;
border-width: 2px;
border-color: #222;
box-shadow: 10px 10px 5px #000;
width: auto;
line-height: 40px;
padding: 10px 25px;
margin-bottom: 1%;
font-family: sans-serif;
overflow: auto;
}
#vote-box-container {
height: 80px;
width: 50px;
float: left;
background: #000;
margin-left: 5px;
position: relative;
}
#vote-box {
height: 80px;
width: 30px;
position: absolute;
left: 10px;
display: table;
padding: 0;
}
#votes {
color: white;
display: table-cell;
vertical-align: middle;
font-weight: bold;
text-align: center;
}
.up {
position: absolute;
top: 0px;
}
.down {
position: absolute;
bottom: 0px;
}
The line-height in your #drop-section css is adding space above and below the arrow images. Try adding line-height:0 to the image containers .up and .down within #drop-section
Related
I am making website in html and css and I have a problem. In my css file I made id "full" which set wooden background after sidebar and it should continue on all page. In my class "picture" I made 80% width white panel - so there should be 80% white background in the middle and 10% edges should be wooden. It works correctly untill my article section, where I added some images of pizzeria. Immediately there is no wooden edges, only white. I don´t understand because my "full" id and "picture" class continue untill end of the body. Could somebody see where is error please?
Image showing error
* {
padding: 0;
margin: 0;
border: 0;
}
.container {
margin: auto;
overflow: hidden;
width: 100%;
}
#full {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
.picture {
margin: auto;
width: 80%;
background: white;
}
#pizzaObrazok {
background-image: url("img/pizzaCompleted.png");
width: 100%;
height: 210px;
margin: 0px;
}
nav {
float: left;
margin-left: 2px;
width: 100%;
height: 32px;
}
ul {
float: left
}
li {
display: inline;
border: 4px solid black;
font-size: 24px;
padding: 10px 64px;
background-color: #990000;
color: #ffffff;
}
li a {
color: #ffffff;
text-decoration: none;
padding-top: 8px;
padding-bottom: 5px;
vertical-align: middle;
}
#imgPizza {
width: 59%;
height: 270px;
padding-left: 190px;
padding-top: 30px;
padding-bottom: 30px;
}
article p {
font-size: 120%;
font-family: fantasy;
text-align: center;
margin-right: 160px;
}
#imgPizza2 {
width: 30%;
height: 270px;
position: absolute;
transform: rotate(345deg);
margin-top: 100px;
margin-left: 50px;
border: 6px solid red;
}
#imgPizza3 {
width: 30%;
height: 270px;
position: absolute;
margin-left: 390px;
margin-top: 100px;
transform: rotate(15deg);
border: 6px solid red;
}
#phone {
border: 2px solid black;
margin-top: 150px;
margin-right: 180px;
padding: 5px;
position: absolute;
display: inline;
text-align: center;
background: #ff4d4d;
}
<header>
<div id="pizzaObrazok">
</div>
</header>
<div id="full">
<section id="navigation">
<div class="container">
<nav>
<ul>
<li>ÚVOD</li>
<li>FOTO</li>
<li>JEDÁLNY LÍSTOK</li>
<li>KDE NÁS NÁJDETE</li>
<li>NÁZORY</li>
</ul>
</nav>
</div>
 
</section>
<div class="picture">
<img id="imgPizza" src="img/pizzacheese.jpg">
<aside id="phone">
<h2>Telefónne číslo:</h2>
<h2> 0905 741 963</h2>
</aside>
</div>
 
<div class="picture">
<article>
<p>U nás dostanete najchutnejšiu pizzu z výlučne kvalitných surovín</p>
<img id="imgPizza2" src="https://cdn.vox-cdn.com/uploads/chorus_image/image/50289897/pizzeria_otto.0.0.jpg">
<img id="imgPizza3" src="https://media-cdn.tripadvisor.com/media/photo-s/09/bc/74/79/pizzeria-du-drugstore.jpg">
</article>
</div>
</div>
You have your elements "#imgPizza2" and "#imgPizza3" whit position absolute outside your "#full" wrapper. You can do various things to achive the effect you are looking for but depends of many others things.
I think the simpliest way is to put your background image in to the body and not in the warpper "#full" or change the postion of your images among others.
body {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
It looks like the wood background is 620 x 387, so my first thought is that it is big enough to cover the first section but not the articles. Maybe add background-repeat: repeat-y; to your #full class and see if the wood border spreads further down the page.
I am making a Image upload result box, somehow I managed to give it proper layout but elements of the result box doesn't seem right in 'Brackets View'
I struggle when it comes to use floats, clear and display. I get confused, I've tried to learn it 4-5 times till now but somewhere I fail to apply them properly.
Can someone guide me through this code while explaining when and where to use them..
Also, I use this technique to clear floats but sometimes it works and sometimes nothing happens:
.example
{
content: ' ';
display: block;
clear: both;
}
My HTML & CSS:
.files-bar {
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
}
.delete {
float: right;
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
width: 100%;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.image-thumb {
float: left;
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
}
.img-thumb:after {
content: '';
display: block;
clear: both;
}
.image-name {
font-size: 17pt;
margin-top: 2px;
}
.image-size {
font-size: 13pt;
margin: 20px 0;
}
.file-status {
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress-wrap {
float: left;
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter {
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up {
margin-left: 30px;
}
.cancel-upload {
float: left;
margin: -25px 0 0 -15px;
}
<div class="files-bar">
<button class="manage-btn delete">Delete</button>
<img class="image-thumb" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap">
<!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
Float is not a good strategy for layout as it requires managing floats with clear:both. clear will clear any floats defined previously, in this case your delete button that is floated right.
Please see this quick reference on float and clear properties.
As mentioned in a comment above, using display:flex will give you greater control over layout. Here is a solution with minimal change to your original code. I set display:flex on the container defined by div files-bar, created a container for progress and one for the delete button. Together with the img, these sibling elements are flex items. Here is a good tutorial on using flex.
And the complete code:
.files-bar
{
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
display:flex;
}
.delete
{
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
display:inline-block;
}
.button-cell {
text-align:right;
flex-grow:1;
}
.image-thumb
{
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
}
.image-name
{
font-size: 17pt;
margin-top: 2px;
}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress-wrap
{
float: left;
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up
{
margin-left: 30px;
}
.progress {
position:relative;
}
.cancel-upload
{
position:absolute;
right:4px;
bottom:2px;
}
<div class="files-bar">
<img class="image-thumb flex-item" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<div class="progress">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap"> <!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
<div class="button-cell">
<button class="manage-btn delete flex-item">Delete</button>
</div>
</div>
UPDATE – New snippet using absolute position within a relative positioned container.
Please review the following solution. Instead of using float, I positioned the elements absolute within the files-bar container. This will work in any browser.
.files-bar
{
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
position:relative;
}
.delete
{
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
position:absolute;
right:12px;
}
.image-thumb
{
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
float:left;
}
.image-name
{
font-size: 17pt;
margin-top: 2px;
}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress {
position:absolute;
left:185px;
}
.progress-wrap
{
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up
{
margin-left: 30px;
}
.cancel-upload
{
position:absolute;
right:4px;
bottom:2px;
}
<div class="files-bar">
<img class="image-thumb" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<div class="progress">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap"> <!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
<button class="manage-btn delete flex-item">Delete</button>
</div>
Layout Problem Solved!
The problem was that I wanted to put image on the left and other contents to the right of the image.
But there was too much use of floats, clear and display it was confusing also code was improper. And even though using them I was not getting the proper output. As the 'paragraph' element was also behind the image due to floats.
So, after some more trials I achieved that layout I wanted without using 'position' and too much of floats and clear.
What I Applied:
First, Floated the image to the left.
Put all of the other content below image inside a div class named 'rest'.
Floated 'rest div' to the left too.
Floated delete button to the right.
At last I've applied Clear Fix for "files-bar div."
It was simple that's it. All other elements adjusted itself. I just needed to put all other contents inside a div element and float it.
Updated HTML:
<div class="files-bar">
<button class="delete">Delete</button>
<img class="image-thumb" src="profile_image/1777859bb71d37aec3.jpg">
<div class="rest">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<p class="cancel-upload">✖</p>
<div class="progress-wrap">
<div class="progress-meter"></div>
</div>
</div>
</div>
Default HTML's CSS has been removed which is also known as 'Doctor CSS'
Updated CSS:
.files-bar
{
width: 100%;
max-width: 600px;
padding: 15px;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
}
.files-bar:after
{
clear: both;
content: '';
display: block;
}
.image-thumb
{
float: left;
width: 160px;
height: 120px;
margin-right: 20px;
}
.rest {float: left;}
.delete
{
float: right;
width: 100px;
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.image-name {font-size: 17pt;}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: inline-block;
font-size: 12pt;
margin-bottom: 15px;
}
.progress-wrap
{
width: 300px;
height: 20px;
color: #111;
height: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.cancel-upload
{
padding: 5px;
float: right;
cursor: pointer;
}
I'm trying for tag SOLD OUT as shown in below figure
but able to achieve upto certain extend shown in below figure
using following HTML & CSS
<a href="some-href">
<img src="img-url">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
.wp-sold-out-strip {
text-align: center;
background-color: #8760AF;
width: 142px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 0px 0px;
position: absolute;
margin-top: -47px;
transform: rotate(-26deg);
}
You need to do a few things:
set the parent's position to relative(the in your case) and overflow to hidden.
set the "sold out"'s width to something that will overflow and the image's height and width to 100% to fill the parent
You'll need the position:relative of the parent so the "sold out" will be aligned to its parent when position:absolute and the overflow:hidden will be applied to it.
.parent {overflow: hidden; position: relative; display: block; width: 200px; height: 200px;}
.parent img { width: 100%; height: 100%;}
.wp-sold-out-strip {
text-align: center;
background-color: #8760AF;
width: 242px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 0px 0px;
position: absolute;
margin-top: -47px;
transform: rotate(-26deg);
}
<a href="some-href" class="parent">
<img src="http://i.stack.imgur.com/Mmww2.png">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
https://jsfiddle.net/ivankovachev/snxt61an/
Try this, set backface-visibility:hidden
a{
text-decoration:none;
width:200px;
height:200px;
display:block;
position:relative;
overflow:hidden;
}
a > img{
width:100%;
height:100%;
}
a > .wp-sold-out-strip {
width: 180px;
color: #FFF;
font-size: 13px;
font-weight: bold;
position: absolute;
text-align: center;
background-color: #8760AF;
bottom:20px;
right:-30px;
transform:rotate(-30deg);
-webkit-backface-visibility:hidden;
}
<a href="some-href">
<img src="https://source.unsplash.com/user/erondu">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
Here the solution!...
Try this code...
<div class="img-wraper">
<a href="some-href" class="">
<img src="img-url">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
</div>
<style media="screen">
.img-wraper {
width: 200px;
height: 200px;
overflow: hidden;
border: 4px solid #cccccc;
}
.img-wraper a {
display: block;
position: relative;
}
.img-wraper a img {
width: 100%;
height: 100%;
}
.wp-sold-out-strip {
position: absolute;
bottom: 20px;
right: -30px;
width: 142px;
transform: rotate(-33deg);
text-align: center;
background-color: #8760AF;
color: #FFF;
font-size: 13px;
font-weight: bold;
}
</style>
Here's another answer for you. Fiddle
What I did to set the parent element a position: relative and position: absolute on the banner. You can then more easily align the item with top and left.
It's also important to set the parent to overflow: hidden so that nothing appears to protrude outside your image. Finally, you need to override the default inline behavior of anchor tags so that you can align the banner properly.
I also increased the left padding for the text to make it appear centered.
.wp-sold-out-strip {
text-align: center;
background-color: #8760AF;
width: 170px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 7px 0 7px 14px;
position: absolute;
top: 107px;
left: -2px;
transform: rotate(-26deg);
}
a {
overflow: hidden;
position: relative;
width: 150px;
height: 150px;
display: inline-block;
}
<a href="some-href">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
Just add
height:30px;
line-height:28px;
and change this value:
margin-top: -70px;
Demo (new tag in orange, old in purple), enjoy:
.wp-sold-out-strip {
text-align: center;
background-color: tomato;
width: 142px;
height:30px;
line-height:28px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 0px 0px;
position: absolute;
margin-top: -70px;
transform: rotate(-26deg);
}
<a href="some-href">
<img src="http://i.stack.imgur.com/Nahj0.png">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
I made a chart with html+css (i really need it to work in all browsers)
its ok but the bars are on the top and i need them to stick to the bottom
i tried vertical-align and tried some other things but neither of them worked
Here is a jsfiddle (if you see it you'll know what i mean)
JsFiddle
Code:
CSS:
.clear {clear:both; line-height: 0; width: 0; height: 0}
#chart {
width: 100%;
height: 220px;
font-family: Arial,sans-serif;
font-size: 12px;
line-height: 17px;
color: #777777;
}
#scale, #chartwrap, #description {
float: left;
margin-right: 7px;
}
#scale {
margin-top: -7px;
}
#scale i {
display: block;
text-align: right;
}
#chartbox {
height: 170px;
display: inline-block;
border: 2px solid #C7C7C7;
border-right: 0;
border-top: 0;
}
.thisday {
display: inline-block;
height: 170px;
margin: 0 18px;
width: 40px;
vertical-align: bottom;
}
.vbottom {
display: block;
}
.thisday .in, .thisday .out {
width: 18px;
display: inline-block;
vertical-align: bottom;
}
.thisday .in span, .thisday .out span {
text-align: center;
font-size: 11px;
color: #2F6D91;
display: block;
}
div.inbar, div.outbar {
width: 18px;
float: left;
background: #41799F;
}
div.outbar {
background: #A5D2F0;
}
div#days {
margin-top: 5px;
}
div#days i {
font-size: 11px;
float: left;
width: 36px;
margin: 0 18px;
}
#description {
margin-left: 7px;
}
#outdes {
margin-top: 1px;
}
#indes i, #outdes i {
float: left;
display: inline-block;
width: 12px;
height: 12px;
background: #40779D;
}
#outdes i {
background: #A5D2F0;
}
#indes span, #outdes span {
float: left;
margin-left: 3px;
line-height: 12px;
font-size: 11px;
}
HTML:
<div id="chart">
<div id="scale">
<i>500</i>
<i>450</i>
<i>400</i>
<i>350</i>
<i>300</i>
<i>250</i>
<i>200</i>
<i>150</i>
<i>100</i>
<i>50</i>
<i>0</i>
</div>
<div id="chartwrap">
<div id="chartbox">
<!-- DAILY -->
<div class="thisday">
<div class="vbottom">
<div class="in">
<span>50</span>
<div class="inbar" style="height:20px;"></div>
</div><div class="out">
<span>10</span>
<div class="outbar" style="height:5px;"></div>
</div>
</div>
</div>
<!-- /DAILY -->
<!-- DAILY -->
<div class="thisday">
<div class="vbottom">
<div class="in">
<span>50</span>
<div class="inbar" style="height:20px;"></div>
</div><div class="out">
<span>10</span>
<div class="outbar" style="height:5px;"></div>
</div>
</div>
</div>
<!-- /DAILY -->
<br class="clear">
</div>
<div id="days">
<i>02-17</i>
<i>02-18</i>
<br class="clear">
</div>
</div>
<div id="description">
<div id="indes"><i></i><span>Received</span><br class="clear"></div>
<div id="outdes"><i></i><span>Sent</span><br class="clear"></div>
</div>
<br class="clear">
</div>
here is your new CSS code :
.clear {clear:both; line-height: 0; width: 0; height: 0}
#chart {
width: 100%;
height: 220px;
font-family: Arial,sans-serif;
font-size: 12px;
line-height: 17px;
color: #777777;
}
#scale, #chartwrap, #description {
float: left;
margin-right: 7px;
}
#scale {
margin-top: -7px;
}
#scale i {
display: block;
text-align: right;
}
#chartbox {
height: 170px;
display: inline-block;
border: 2px solid #C7C7C7;
border-right: 0;
border-top: 0;
}
.thisday {
display: inline-block;
height: 170px;
margin: 0 18px;
width: 40px;
vertical-align: bottom;
position: relative;
}
.vbottom {
display: block;
position: absolute;
bottom:0px;
}
.thisday .in, .thisday .out {
width: 18px;
display: inline-block;
vertical-align: bottom;
}
.thisday .in span, .thisday .out span {
text-align: center;
font-size: 11px;
color: #2F6D91;
display: block;
}
div.inbar, div.outbar {
width: 18px;
float: left;
background: #41799F;
}
div.outbar {
background: #A5D2F0;
}
div#days {
margin-top: 5px;
}
div#days i {
font-size: 11px;
float: left;
width: 36px;
margin: 0 18px;
}
#description {
margin-left: 7px;
}
#outdes {
margin-top: 1px;
}
#indes i, #outdes i {
float: left;
display: inline-block;
width: 12px;
height: 12px;
background: #40779D;
}
#outdes i {
background: #A5D2F0;
}
#indes span, #outdes span {
float: left;
margin-left: 3px;
line-height: 12px;
font-size: 11px;
}
To sum up, I just added position: relative; to the end of .thisday, and I also added position: absolute; and then bottom:0px; to .vbottom.
Also, this method will still work if one day you enlarge your graphic. It will stick to the bottom of your graph and you will not have to reajust from top. If you want the bars to go a pixel more or less from the bottom, just do bottom:-1px; or bottom:1px; instead of 0px and it will be readjusted !
This will make the bars always align along the bottom of the chart. It's a nice solution as long as you don't need to support earlier versions of IE than 8.
.thisday {
display: inline-table;
height: 170px;
margin: 0 18px;
width: 40px;
}
.vbottom {
display: table-cell;
vertical-align: bottom
}
.thisday is the container and has been given display: inline-table, and the area supposed to be in the bottom has display: table-cell and vertical-align: bottom.
EDIT: since .vbottom is not absolutely positioned, width on .thisday can be left out altogether, in case you might want to add more bars per day or so. That's one clear advantage of this method.
Forked fiddle: http://jsfiddle.net/7VvZA/1/
Add position relative for chartbox class:
position: relative;
and position absolute for vbottom class:
position: absolute;
bottom: 0;
UPDATE (I work in devtools and don't save changes here is updated version):
http://jsfiddle.net/QzHzT/2/
I cannot correctly position the div form in my layout.
By looking at my div placement and css below, does anyone have an idea what I could be doing wrong?
#floorplans {
float: left;
height: 165px;
width: 203px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
position: relative;
background: #FFFFFF url(https://lorempixel.com/320/170/) no-repeat;
padding-top: 14px;
padding-left: 20px;
display: block;
color: #000000;
line-height: 1.5em;
padding-right: 10px;
}
#development {
float: left;
height: 165px;
width: 204px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
position: relative;
background: #FFFFFF url(https://lorempixel.com/204/165/) no-repeat;
padding-top: 14px;
padding-left: 20px;
display: block;
color: #000000;
line-height: 1.5em;
padding-right: 10px;
}
#projects {
background: #FFFFFF url(https://lorempixel.com/153/127/) no-repeat;
height: 127px;
width: 153px;
text-align: left;
padding-left: 300px;
color: #333333;
padding-top: 25px;
display: block;
float: left;
position: relative;
line-height: 1.5em;
font-size: 10px;
padding-right: 15px;
clear: left;
}
#form {
background: #990000 url(https://lorempixel.com/450/309/) no-repeat;
float: left;
height: 309px;
width: 450px;
position: relative;
padding-top: 20px;
padding-left: 30px;
padding-right: 30px;
color: #FFFFFF;
}
<div id="wrapper">
<div id="logo"></div>
<div id="topnav"></div>
<div id="nav">
<ul>
<li>link</li>
<li>link2</li>
<li>link3</li>
<li id="last">link4</li>
</ul>
</div>
<div id="gallery"></div>
<div id="floorplans"></div>
<div id="development"></div>
<div id="projects"></div>
<div id="form">
<div>
</div>
<div id="footer"></div>
</div>
You'll notice the div form is dropping down. What should I do to get things to line up? Should I rework the placement of the divs?
The form div's top is in line with the top of the div that precedes it. The clear:left; on #projects moves #projects to the next line (good), along with the following content (bad). Try a negative top margin, or consider restructuring your HTML to put #form before #projects.
Adding the following should work:
#form {
margin-top:-180px;
}
#projects {
border-right: 1px solid #FFFFFF;
}
Because you have two blocks (FLOORPLANS and DEVELOPMENT INFO) each with a border, they're now too wide to sit next to the form block. Test this by removing one or both borders and seeing if the form then pops back up there.
Note, negative margin often has issues in IE6, be sure and check any solution against that.