I have an extremely simple layout right now:
<div class="spacer">
<h1>Finalizing Your Account </h1>
</div>
<div class="greycont60 greycont">
<div class="minispacer"><h5>Almost done! Just a few things left...</h5></div>
</div>
<div class="greycont40 greycont"></div>
<div style="clear:both;"></div>
Here is the CSS:
.minispacer {
background: #d9d9d9;
height:30px;
width: 300px;
padding-left:10px;
}
.greycont60 {
width: 56%;
float: left;
}
.greycont40 {
width: 36%;
float: right;
}
.spacer {
height:56px;
background:url(../images/bg2.png) repeat;
padding:0 10px;
margin-top:20px;
margin-bottom:10px;
}
.spacer h1 {
font-size:22px;
padding-top:4px;
color:#727272;
}
.greycont {
background-color:#e8e8e8;
padding:15px;
margin-bottom:10px;
}
Now here is how it turns out:
Why is their so much space about the MiniSpacer bar? I tried to add 1px of top padding and suddenly the bar was doing some crazy things...
Try adding margin:0px; to your h5 tag.
Heading tags get default top and bottom margins.
Thanks,
Aditya
Related
I'm a florist by trade, so I was as surprised as you when my floral arrangement knowledge isn't translating to div arrangement html styles. Perhaps you can help.
Here's the html:
<div id="blocks">
<div id="block0"></div>
<div id="block1"></div>
<div id="block2"></div>
<div id="block3"></div>
<div id="block4"></div>
<div id="block5"></div>
</div>
And here's the style:
div {
outline: solid 1px black;
}
#blocks {
width:80%;
height:500px;
margin:0 auto;
background-color: #ffe;
}
#block0 {
height:10%;
width:100%;
background: red;
float: left;
}
#block1 {
height:10%;
width:25%;
background: orange;
float: left;
}
#block2 {
height:90%;
width:50%;
background: cyan;
float:left;
}
#block3 {
height:45%;
width:25%;
background: yellow;
float: right;
}
#block4 {
height:45%;
width:25%;
background: green;
float: left;
}
#block5 {
height:80%;
width:25%;
background: magenta;
float: left;
}
I'd love for the top of block5 to slide right up against the bottom of block1 and an explanation of its behavior. Thank you.
Here is the fiddle for this
It's going to the bottom beacuse you are floating to the left several elements that are before your block 5. You can remove the float: left to the block 5, set a position: relative and top: 20% (this will place the block 5 20% top relative to the blocks container)
#block5 {
height:80%;
width:25%;
background: magenta;
position: relative;
top: 20%;
}
In another words, block5 is going under because you already used up all the available width space with previous blocks. You can relate this to your job: if you place your flower pots on the edge of your balcony and there's not enough space, the last pot falls on top of someone's head.
To avoid this you can build shelves, made with other divs. Here's a quick attempt at your code. With a little dedication you can get it better.
div {outline: solid 1px black}
#blocks {
width:80%;
margin:0 auto;
background-color: #ffe;
}
#shelve1,#shelve2,#shelve3{display:inline-block}
#shelve1 {width:21%}
#shelve2 {width:56%}
#shelve3 {width:21%}
#block0 {
height:50px;
background: red;
display:block
}
#block1 {height:50px;background: orange}
#block2 {height:450px;background: cyan}
#block3 {height:225px;background: yellow}
#block4 {height:225px;background: green}
#block5 {height:400px;background: magenta}
<div id="blocks">
<div id="block0"></div>
<div id="shelve1">
<div id="block1"></div>
<div id="block5"></div>
</div>
<div id="shelve2">
<div id="block2"></div>
</div>
<div id="shelve3">
<div id="block3"></div>
<div id="block4"></div>
</div>
</div>
Nowadays, it's also not that good idea to place your pots on a floating tray, with a gust of wind they will all fall down. CSS Tricks explains why and recommends the use of the display property.
I am having extreme difficulty organizing two divs.
I have a footer, which includes two paragraphs. I want paragraph 1 hugging the left border of the footer div, and I want paragraph 2 hugging the right border of the footer div, AND these paragraphs must be on the same line.
My problem is that my divs are behaving oddly.
I have tried floating and giving widths but nothing seems to work, the paragraphs seem to keep piling on top of eachother.
Does anybody know how to resolve this? I just want to know how to write 2 paragraphs out on the same line hugging opposite borders.
HTML:
<div id='container'>
<div id='footer'>
<div id="errors">
<p>paragraph 1</p>
</div>
<div id="other">
<p>paragraph 2</p>
</div>
</div>
</div>
CSS:
#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}
#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
margin-left:4.5%;
text-align:left;
color:red;
}
#other
{
text-align:right;
margin-right:3%;
display:inline-block;
}
JS FIDDLE which shows how my code is behaving oddly.
I have made changes to your fiddle https://jsfiddle.net/4vuywmn2/1/
You must float the errors div to the left and the other div to right and you must clear after the container around them closes.
To understand why you need to clear I suggest you read this answer
Is this what You want :
#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}
#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
margin-left:4.5%;
text-align:left;
color:red;
display:inline-block;
float:left;
}
#other
{
text-align:right;
margin-right:3%;
display:inline-block;
float:right;
}
<div id="container">
<div id='footer'>
<div id="errors">
<p>Paragraph 1</p>
</div>
<div id="other">
<p>Paragraph 2</p>
</div>
<div style="clear:both;"></div>
</div>
</div>
You have to add display:inline-block; for error class, and using float : left for error, and right for other. And, on end, after other, You have to add one more div with clear:both;, how above div float will be cleared.
Try float and position attributes like this...
#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}
#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
margin-left:4.5%;
text-align:left;
color:red;
float:left;
position:absolute;
left:0px;
}
#other
{
text-align:right;
margin-right:3%;
display:inline-block;
float:right;
position:absolute;
right:0px;
}
try this mate, is this what you want:
#footer
{
height: 100px;
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
float: left;
margin-left:4.5%;
text-align:left;
color:red;
}
#other
{
float: right;
text-align:right;
margin-right:3%;
display:inline-block;
}
https://jsfiddle.net/4vuywmn2/5/
I am playing around with using Divs and CSS instead of tables and I am having some problems with my code/CSS. I am trying to set this up so I have 3 columns next to eachother in a container that is centered to the page which has the text aligned to the bottom so the text is around the same height as the bottom of the image I am using in the center column. I have been unable to achieve this and I have a new found respect for UI guys. My code and CSS are as follows. Any guidance would be helpful :)
body {
}
#Container
{
border:1px solid #dddddd;
padding:40px 94px 40px 94px;
background:#ffffff;
width:55%;
height:auto;
border-radius:0px;
margin-left:auto;
margin-right:auto;
position:relative;
}
#Address
{
border:1px solid #dddddd;
position:relative;
text-align:left;
width: 33%;
}
#Phone
{
border:1px solid #000000;
position:relative;
text-align:right;
width: 33%;
}
#Logo
{
border:1px solid #4cff00;
position:relative;
float: left;
width: 33%;
}
HTML
<div id="Container">
<div id="Address">123 Testing Street</div>
<div id="Phone">(ccc) 223-3323</div>
<div id="Logo"><img src="http://upload.wikimedia.org/wikipedia/en/0/0c/ITunes_11_Logo.png" /></div>
</div></blockquote>
see the fiddle here , This is not 100% everything you asked for, but it is a big start! You have the appearance of a table while only using div's. I am not going to finish every little detail for you, but this should get you going, it is almost complete.
#Container{
border:1px solid #dddddd;
padding:5px;
background:#bbb;
width:55%;
margin: 0px auto;
position:relative;
height:200px;
}
.cell{
display:inline-block;
width:32%;
height:100%;
border:1px solid #000;
position:relative;
vertical-align:bottom;
line-height:370px;}
<div id="Container">
<div id="Address" class="cell">123 Testing Street</div>
<div id="Phone" class="cell">(ccc) 223-3323</div>
<div id="Logo" class="cell">
<img src="http://upload.wikimedia.org/wikipedia/en/0/0c/ITunes_11_Logo.png" style="height:50px;" />
</div>
</div>
I simplified your css a bit. See if this is what you're looking for.
#Container{
margin:0 auto;
width:500px;
background:gray;
}
#Address, #Phone, #Logo{
float:left;
width:33%;
height:256px;
line-height:512px;
}
http://jsfiddle.net/39M9L/1/
Part of the problem you're going to have with aligning to the image is there is white space around the logo, so to get the text to align to the edge of the logo, you're going to have to tweak the numbers a bit, rather than rely on the image height.
You can add a span within a div, and use margin-top to make it in the bottom of the div.
CSS:
#Container > div {
min-height: 52px;
float: left;
text-align: center;
}
#Container > div > span {
display: inline-block;
margin-top: 35px;
}
Take a look: [JSFIDDLE] (http://jsfiddle.net/blck/txXE2/)
I am making a blog page and i have designed this http://jsfiddle.net/thiswolf/6sBgx/ however,i would like to remove white space between the grey,purple and red boxes at the bottom of the big red box.
This is the css
.top_div{
border:1px solid red;
position:relative;
}
.pink{
width:40px;
height:40px;
display:block;
background-color:pink;
}
.green{
width:40px;
height:40px;
display:block;
background-color:green;
}
.orange{
width:40px;
height:40px;
display:block;
margin-top:120px;
background-color:orange;
}
.red{
width:600px;
height:240px;
display:block;
background-color:red;
margin-left:40px;
position:absolute;
top:0;
}
.bottom{
position:relative;
}
.author,.date,.tags{
height:40px;
display:inline-block;
position:relative;
}
.author{
width:120px;
border:1px solid green;
margin-right:0;
}
.date{
width:120px;
border:1px solid green;
}
.tags{
width:120px;
border:1px solid green;
}
.isred{
background-color:red;
}
.ispurple{
background-color:purple;
}
.isgrey{
background-color:grey;
}
this is the html
<div class="top_div">
<div class="pink">
</div>
<div class="green">
</div>
<div class="orange">
</div>
<div class="red">
</div>
</div>
<div class="bottom">
<div class="author isred">
</div>
<div class="date ispurple">
</div>
<div class="tags isgrey">
</div>
</div>
That'll be the actual spaces in your HTML. Whitespace between inline-block elements is actually rendered. If you remove the whitespace, then it'll work.
e.g.
<div class="bottom"><div class="author isred"></div><div class="date ispurple">
</div><div class="tags isgrey"></div>
http://jsfiddle.net/Yq5kA/
There are the whitespaces in your source code. You can either delete the whitespaces, or set the font-size of the container to 0 (0r 0.1px to avoid certain browser problems).
Just add a wrapper div around all elements, for example named "container", and give it:
font-size: 0.1px;
See updated fiddle:
http://jsfiddle.net/6sBgx/3/
Keep in mind that for this solution, if the containing divs should have text in them, you have to reset the font-size.
Change the CSS:
.author, .date, .tags {
display: block;
float: left;
height: 40px;
position: relative;
}
I know this isn’t the desired solution, but it works:
.isred{
background-color:red;
margin-right: -5px;
}
.ispurple{
background-color:purple;
margin-right: -5px;
}
.isgrey{
background-color:grey;
}
Here's my updated css will resolve the problem
.author, .date, .tags {
height: 40px;
display: inline-block;
position: relative;
margin-right: -4px;
}
There are actual spaces between HTML elements. So For removing this you can try to do following solutions:
Read This document
Try in Jsfiddle -
Remove the spaces - http://jsfiddle.net/6sBgx/7/
Negative margin - http://jsfiddle.net/6sBgx/8/
Set the font size to zero to parent element - http://jsfiddle.net/6sBgx/6/
Just float them left - http://jsfiddle.net/6sBgx/9/
I've tried numerous of things to fix this. I cannot seem to get the nested div inside the parent div without having to use margin. I'm trying to get it in the regular way which is position:relative on parent and position:absolute on nested. It's not working though, anybody know why?
HTML
<div class="header">
<div class="logo">
<img src="/images/logo.png" width="96" height="82">
</div>
<div id="nav">
Portfolio
About
Contact
</div>
<div id="headerPro">
</div>
</div>
CSS
.header {
position:relative;
background-color: #2C2E31;
border-bottom: #242426 2px solid;
height: 182px;
}
.logo {
text-align: center;
padding-top: 35px;
}
#nav {
position:absolute;
bottom: 0;
width: 100%;
text-align:center;
text-decoration:none;
font-size:20px;
font-family:raleway-regular;
}
#nav a {
border-bottom:#FFFFFF 2px solid;
color:#FFFFFF;
text-decoration:none;
margin-left: 8px;
margin-right:8px;
}
#headerPro {
position:absolute;
float:right;
width:100px;
height:100px;
background-color:red;
}
It's hard to tell what exactly you want it to look like, but maybe I got you right:
I revised your HTML code to use ul for the nav which is best practice:
<div class="header">
<div class="logo">
<img src="/images/logo.png" alt="logo"/>
</div>
<ul id="nav">
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
<div id="headerPro">
</div>
</div>
With that your css code could look like that:
.logo > img {
display: inline-block;
width: 96px;
height: 82px;
}
#nav {
position:absolute;
list-style-type: none;
bottom: 0;
width: 100%;
text-align:center;
text-decoration:none;
font-size:20px;
font-family:raleway-regular;
}
#nav > li {
display: inline;
}
#headerPro {
position:absolute;
top: 35px; /* assuming you want this to line up with the logo */
right: 0;
width:100px;
height:100px;
background-color:red;
}
Here is a demo.
See this fiddle
Example
I have made two changes added a float:left to the logo css:
.logo {
float:left;
}
and removed the position:absolute from the header pro css
Your div is flowing outside the header block because of the logo div, if you make that float left (as I have done in the fiddle) the Red Div will move up.
It would help if you could explain exactly where you want the #HeaderPro div..
Apparently the browser positions your div#headerPro just below the previous(sibling) div. If you want it to be part of the parent div, add top:2% to position the red div in the top right corner of the black div.
#headerPro {
position:absolute;
float:right;
width:100px;
height:100px;
background-color:red;
top: 1%;
}