I have a wrapper div in my css that covers most of my viewport. I have a background color and inside that div, I have two more divs floated right and left respectively.
When I'm with Chrome, I can see the background code perfectly, but when I'm with Firefox, the background color is not seen. Here are some screenshots:
On Chrome:
On Firefox
And here's the code.
My HTML:
<div id="wrapper">
<div id="asd"></div>
<div id="perejavi">
<p id="pere">Pere</p>
<p id="and">&</p>
<p id="javi">Javi</p>
</div>
<div id="web">
<p id="programmer">Programación</p>
<p id="programmer2">diseño web</p>
</div>
My CSS:
#wrapper {
background-color: #00CE6B;
height: auto;
min-height: 93%;
width: 85%;
color: #ffffff;
margin: 0 auto;
}
#perejavi {
margin: 0;
font-size: 9.1em;
float: left;
padding-bottom: 0;
height: 60%;
width: 50%;
}
#web {
margin: 0;
width: 50%;
height: 60%;
float: right;
}
Why is this happening? Hope you can help!;)
Floats remove the HTML element from the normal document flow and can cause issues like this. There are a couple ways to handle floats but i'll just give you the way I prefer to do it:
in your css:
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
Then in your HTML:
<div id="wrapper" class="clearfix>
This creates a pseudo element as the last child of your .clearfix div which clears the floated elements contained within the .clearfix div
note: Also, you seem to be missing your closing </div> for your wrapper div. Make sure you add that in
Further reading on floats and the strangeness they bring with them:
http://css-tricks.com/all-about-floats/
Related
EDIT: The problem is solved, so thanks to everyone who helped!
Original post:
So I am trying to put three divs next to each other (until thus far this part has been successful) with the third and last div to like go to attach to the bottom of the divs, which I have no clue how to do this.
How can I put the third div to attach to the bottom of the middle div and stay within the container?
To show you, I made a quick example. Something like this:
The black colour in the image is the 'body'.
The grey is a container div I put the three other divs in.
Each other box represents a div with what I want them to do and how approx. I want them to be positioned of one another.
I hope this can be done only using html and css. I would appreciate any help.
So far I have this as html for the divs:
#nav,
#textarea,
#contactallpages {
vertical-align: top;
display: inline-block;
*display: inline;
}
#containerpage {
position: relative;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
background-color: black;
height: 100%;
width: 70%;
}
#centercontainer {
background-color: lightblue;
width: 75%;
margin: 0 auto;
padding: 2%;
}
#nav {
float: left;
background: #aaaaaa;
height: 50%;
width: 15%;
padding: 1%;
}
#textarea {
display: inline-block;
background: #cccccc;
height: 70%;
width: 64%;
padding: 1%;
}
#contactallpages {
background: #bbbbbb;
position: absolute;
width: 15%;
padding: 1%;
bottom: 0;
}
<div id="containerpage">
<div id="centercontainer">
<div id="nav">
<ul>1
</ul>
<ul>2
</ul>
<ul>3
</ul>
</div>
<div id="textarea">
<header>
<h1>Welcome</h1>
</header>
<p>
Text text more text.
</p>
<p>
And more text.
</p>
</div>
<div id="contactallpages">
Random small textbox
<br>More small text.
</div>
</div>
</div>
The way you should lay this out is one container div and 3 children div's set to display: inline-block;
Using display: inline-block; will position all the div's next to each other and allows you to use the vertical-align property.
Now all you would need to do is set the proper vertical-alignment for each of the child div's. You can also set the height to the container div (#myPage) and that is the height that vertical-align will use to determine the positioning.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#myPage div {
display: inline-block;
width: 100px;
}
#centerFold {
height: 200px;
vertical-align: middle;
background-color: yellow;
}
#navBar, #contact{
height: 100px;
}
#navBar {
vertical-align: top;
background-color: red;
}
#contact {
vertical-align: bottom;
background-color: blue;
}
<div id="myPage">
<div id="navBar">
</div>
<div id="centerFold">
</div>
<div id="contact">
</div>
</div>
Try out flexbox if you do not have too much to worry about backward compatibility. My time at the moment doesn't allow to elaborate, but the essential part would be
#centercontainer {display: flex}
#contactallpages {align-self: flex-end}
Be aware though that some prefixing will be necessary for older browsers and this is only the standards-compliant solution. It does everything you want and you can forget about floating. Adding a
#textarea {flex-grow: 1}
would even allow the center to grow not only in height but in width also.
I'm sure I'm missing something here... so I've dumbed down my question as much as I can so it makes sense. (I'm somewhat a novice at using CSS properly).
To clarify, I made a graphic that shows what I'm trying to accomplish, but I can't seem to get it right and I've been trying all day. I need a 100% wide header div, content in the middle, and a 100% wide footer div. My footer div keeps going up behind my content area. CANT figure it out.
<div id="HEADER"></div>
<div id="CONTENT">
<div id="contentwrap">
<div id="top-left-photo"></div>
<div id="top-right-date"></div>
</div>
</div>
<div id="FOOTER"></div>
I've also included a fiddle:
http://jsfiddle.net/b9kah2wx/
Thank you!!
I've made some changes to your jsfiddle http://jsfiddle.net/b9kah2wx/2/
#HEADER {
height:300;
width: 100%;
}
#CONTENT {
background-color: #C0F;
height:auto;
width: 100%;
}
#FOOTER {
background-color: #C00;
height:500px;
width: 100%;
}
#contentwrap {
width: 66%;
height: auto;
margin: 0 auto;
background-color:#0ff;
}
#top-left-photo {
float:left;
height: 180px;
width: 40%;
margin-right: 15px;
background-color: #555555;
font-family:"Dirty";
}
#top-right-date {
float:left;
height: 180px;
width: 40%;
margin-right: 0px;
background-color: #555555;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
You'll notice I changed the fixed width to percentages just so I could work with it in the jsfiddle but the basic idea is there.
You also need to clear your float:ed elements so the parent div#contentwrap height problem will get fixed. I've added this code for you.
and this is your HTML
<div id="HEADER"><h1>header</h1></div>
<div id="CONTENT">
<div id="contentwrap">
<div id="top-left-photo">photo</div>
<div id="top-right-date"> date</div>
<div class="clearfix"></div>
</div>
</div>
<div id="FOOTER"></div>
Do this: Add the below code to your css file
* {
margin: 0 auto; /* Centers everything with a given with except when floated or altered with margin and position properties */
}
Note: It's important that you clear your floats as Paulie_D mentioned
I am trying to get a centered in the space that is left empty by a sidebar. This is how I'd like it to look like:
I actually managed to make this work OK for most browsers using margin: auto for the div in question, while setting overflow: hidden:
Fiddle here
CSS
#header {
height: 50px;
background: #224444;
color: #fff;
}
#container div {
padding: 1em;
}
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
}
#sidebar {
float: right;
width: 200px;
background: #aaa;
height: 300px;
}
HTML
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content">
Centered Content
(Works everywhere but on IE9)
</div>
</div>
However, it does not work with IE9. It is strange as IE8 works OK!
I am running out of ideas, so I thought that maybe someone knows what is going on? The trick seems to work perfectly everywhere else.
NOTE: Please note that the content div should be flexible as it is in the demo. As the available space decreases, it should change size and squeeze in.
Isolate the centering from the floating
This affects IE9/10.
It works fine if the floated element is removed, or if width is used instead of max-width. The presence of floated content, combined with the use of margin:auto and max-width instead of width, appears to be confusing IE9+.
To fix this, put the centered content in a wrapper div, so that the centering of the content can be separated from the floating of the sidebar. In other words, too much is happening layout-wise in a single div, more than IE9+ can handle. So split up the #content div into two separate divs.
#header {
height: 50px;
padding: 1em;
background: #224444;
color: #fff;
}
#content-wrapper {
overflow: hidden;
}
#content {
max-width: 400px;
margin: auto;
padding: 1em;
background: #ddd;
height: 300px;
}
#sidebar {
float: right;
width: 200px;
padding: 1em;
background: #aaa;
height: 300px;
}
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content-wrapper">
<div id="content">
Centered Content
</div>
</div>
</div>
This tested fine in IE7/8/9/10. On a side note, because a wrapper div was added, the padding: 1em; now has to be added to each element individually.
IE is notorious for not working without proper doctypes.
Try adding the HTML5 one
<!DOCTYPE html>
Floats are a tricky business. Strictly speaking, they're only supposed to affect the inline content that flows around them, so margins acts like the floats aren't even there.
Try this instead:
#container {text-align:center}
#content {display:inline-block;text-align:left}
This should make the content box act like an inline element, and therefore appear centered in the space.
As far as I remeber I've always problems with margin:0 auto because I didn't specify width property.
So everytime you want use margin:auto you propably should write this:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:500px;
}
or in percentage:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:30%;
}
EDIT
If you want to create flexible layout please take a look to bootstrap and fluid grids.
I have the following:
<div class="outer" style="margin-bottom: 10px">
<div class="dialog-float">
<select name="AccountID" id="AccountID">
...
</select>
</div>
<div class="dialog-float">
Create
</div>
<div class="dialog-float">
<label for="htmlEdit">Html Editor</label>
</div>
</div>
What I would like to do is:
a) Have a 10px margin below the class "outer". Right now it seems like that DIV does not have any height and the margin doesn't appear properly.
b) Have all the "dialog-float" classes line up vertically.
Can someone give me some suggestions on what I am doing wrong.
add the following to your css file
.clear_cont, .cc {
min-height: 1px;
}
.clear_cont:after, .cc:after {
clear: both !important;
content: ".";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
//ok now IE6 doen't have min-height property here is a hack
* html .clear_cont, * html .cc{
height: 1px;
}
Whenever you need to fix this kind of problems add "cc" or "clear_cont" class to the container DIV
<div class="outer cc" style="margin-bottom: 10px">
Add a wrapping element for this solution to work:
<div class="outer" style="margin-bottom: 10px">
<div class="inner_wrapper">
<!-- ... -->
</div>
</div>
Sample
http://jsfiddle.net/dbjPV/2/
CSS
.outer {
border: 1px solid #ff0000; /* Show element size */
margin-bottom: 10px;
height: 200px;
display: table;
overflow: hidden
/* Include in separate IE CSS-file */
/*position: relative;*/
}
.inner_wrapper {
display: table-cell;
vertical-align: middle;
/* Include in separate IE CSS-file */
/*position: absolute;
top: 50%*/
}
.dialog-float {
border: 1px solid #00aa00; /* Show element size */
/* Include in separate IE CSS-file */
/*position: relative;
top: -50%*/
}
If it was me i would use the following css:
.outer{
margin-bottom: 10px;
min-height: 100px;
width: [some width];
}
this should do it.
The outer box would be a minimal width of 100px and grow with the content.
and always have 10px margin at the bottom.
Also the width is in my opinion always best to set.
Then you always know how big it is.
And dont forget that a div is a block element, so when placed like you did it will always be shown verticle.
A tip:
I never (at least try to never) use a clear div.
I think it is better to declare a width for a floating div so that it will fit the container div perfectly and other divs wont get both sides.
if you have them as floats than you could use the display: block css for it, but i'm not sure if it overules the float.
I have gotten the assignment to code a website from tables to CSS. While this is easy I have one question on how to recreate one of the site's biggest detail.
Site is: www.optimizer.dk.
How can I recreate the labels coming out of the left side, while still having the content in the middle?
Rest of the site is no worries.
Is the solution to:
padding-left: 200000px;
margin-left: -200000px;
To fake the expansion to the left?
I would possibly do it like this:
Live Demo
CSS:
html, body {
margin: 0;
padding: 0;
border: 0;
overflow-x: hidden
}
body {
background: #eee
}
#container {
width: 300px;
margin: 0 auto;
background: #bbb;
}
li, li span {
height: 25px;
}
li {
position: relative;
width: 200px;
background: #777
}
li span {
display: block;
position: absolute;
width: 9999px;
left: -9999px;
top: 0;
background: url(http://dummyimage.com/50x30/f0f/fff)
}
HTML:
<div id="container">
<ul>
<li><span></span>Menu Item</li>
</ul>
<div id="content">
Hi!
</div>
</div>
This answer was based on an older answer I wrote: 'Stretching' a div to the edge of a browser
Ideally here you would want a fluid width. See: http://jsfiddle.net/cbNvn/1/
<div id="left">Left</div>
<div id="center">Center</div>
<div id="right">Right</div>
div {
float: left;
}
#left {
width: 25%;
text-align: right;
}
#center {
width: 50%;
}
#right {
width: 25%;
}
Expanding the page would expand the left column and the background image can repeat. The linked images can lay over the background as they do currently. The text-align:right attribute will keep the linked images on the right.
You need 3 divs with float:left to create the 3 columns
i would put it all in a div and set position:absolute;. then put your buttons in there own divs so you can move them.
or
put it all in a div and set the margin to -5%(mite need to play with this into it works). then make the image the background and put you text buttons in there own div's so you can move then to where you want them.
Then use float:left; to line them up