I’m having problems with my CSS. Basically I have a <div> called container which holds all the content of my site. The container runs parallel to a right hand margin of other stuff.
I need the two to align correctly at the bottom. Chrome and Safari show the container height the same and the right hand margin and container both align but in firefox the container is shorter than the right hand margin. Is there anyway I can set a seperate css condition for firefox or another way because it looks silly.
I have tried using height 100% but I can’t use this because I have javascript and other stuff which is hidden and fades in and other reasons.
#container {
/* [disabled]overflow: hidden;
*/
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
/* [disabled]float: left; */
width: 960px;
margin-left: auto;
margin-right: auto;
}
body {
/* [disabled]margin-right: auto; */
/* [disabled]margin-left: auto; */
/* [disabled]width: 1010px; */
font-size: 11px;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
color:#3F3F3F;
background-color: #F3F3F3;
margin-top: 20px;
overflow:auto;
/* [disabled]float: left; */
}
You could try something like that:
HTML
<div>HEADER</div>
<div class="container">
<div class="content">
<p>Content Area</p>
<p>row#2</p>
<p>row#3</p>
<p>row#4</p>
<p>row#5</p>
<p>row#6</p>
</div>
<div class="sidebar">
Sidebar
</div>
</div>
<div>FOOTER</div>
CSS
.container {
width: 960px;
padding: 10px 20px 20px;
margin: 0 auto;
overflow: hidden;
}
.content, .sidebar {
float: left;
padding: 1%;
padding-bottom: 100%;
margin-bottom: -100%;
}
.content {
width: 68%;
background-color: red;
}
.sidebar {
width: 28%;
background-color: green;
}
This should align the two columns to the same height.
I've made a demo you can try.
EDIT: maybe you could take a look at the article on CSS-Tricks that talk about different valid alternative methods.
Without HTML it's tough to say exactly. What about putting both in a wrapper div that has a definite pixel height, then your #content and #margin divs at 100% height?
#wrapper{
width: 100%;
height: your height in px;
}
#container {
/* [disabled]overflow: hidden;
*/
height: 100%;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
/* [disabled]float: left; */
width: 960px;
margin-left: auto;
margin-right: auto;
}
#margin{
height:100%;
}
Also, play with all of your CSS in firebug to troubleshoot this. Removing attributes one by one to find a possible problem.
Related
This is piece of bigger project but what happens is that use of negative margin on one element (.pag) takes the other element (#ar_wr_in) out from floated box (#ar_wr)?
It works fine in Firefox but does not in Chrome or IE.
HTML:
<body>
<div id="ar_wr">
<div class="pag">pagination</div>
<div id="ar_wr_in">
<section class="ar">isdjs fjs odifj</section>
</div>
</div>
</body>
CSS:
body {
color: #f00;
background: #191919;
font-family: LucidaGrande, Helvetica, Arial, sans;
}
section {
display: block;
float: left;
}
section {
margin: 0px;
}
#ar_wr {
width: 59%;
padding: 1%;
background: #ffddff;
border-radius: 5px;
margin-right: 1.5%;
}
#ar_wr {
float: left;
margin-top: 80px;
}
#ar_wr_in {
width 100%;
float: left;
margin-top: 17px;
}
.pag {
font-size: 12px;
margin-top: -77px;
/* background: #ddffff; */
position: relative;
}
.ar {
width: 100%;
margin-bottom: 40px;
position: relative;
background: #ddffff;
}
Here is JSFiddle
Is there some fix or hack for this to make it look as in Firefox?
Thank you
If you make your pagination element have absolute positioning then it can happily sit outside it's parent without affecting other non-absolute elements that come after it:
.pag {
font-size: 12px;
margin-top: -77px;
/* background: #ddffff; */
position: absolute;
}
Strange that Firefox treats it differently, but I would actually expect the result that you see in Chrome from using relative positioning like that.
I'm quite new on web development. I'm struggling with this question for a while. Now I post my question(s) here.
The souce code is as linked: Source Code
The HTML:
<div id="wrap">
<div id="main" class="clearfix">
<ul class="ranklist" id = "ranklist">
<li class="ranklistitem font-size-0">
<div class="itemnumber divinline"> <span class="helper"></span>1</div>
<div class="userprofile divinline"><img class="profileimg" src=""/></div>
<div class="nameandcredit divinline">
<div class="username">SteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteve</div>
<div class="credit">I'm description</div>
</div>
<div class="ranktitle divinline">Total:</div>
<div class="usercredit divinline">1000</div>
</li>
</ul>
</div>
</div>
The CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
html {
background: #aaaaaa;
}
body {
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
font-family: "PingHei", "Helvetica Neue", "Helvetica", Arial, "Microsoft YaHei";
font-weight: lighter;
}
#wrap {
min-height: 100%;
}
#main {
overflow-y: auto;
padding-bottom: 55px;
}
div, ul, p {
padding: 0px;
margin: 0px;
color: #ffd8d0;
}
.rewarddes
{
margin-top:10px;
display:block;
color:#ffdcc5;
overflow:hidden;
font-size:87.5%;
}
.ranklistitem {
height: 60px;
border-bottom: solid 1px #faa559;
font-size:87.5%;
}
.font-size-0 {
}
.divinline {
display: inline-block;
vertical-align: top;
padding: 0px;
margin: 0px;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.itemnumber {
line-height: 60px;
height: 60px;
background:#aa8800;
width: 6%;
text-align: right;
padding-right: 5px;
}
.userprofile {
line-height: 60px;
height: 60px;
width: 14%;
text-align: center;
vertical-align: middle;
background:#228845;
}
.profileimg {
height: 36px;
width: 36px;
vertical-align: middle;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border: solid 2px #fff;
}
.nameandcredit {
height: 60px;
width: 45%;
padding-left: 5px;
background:#342389
}
.username {
height: 55%;
text-align: left;
vertical-align:bottom;
overflow:hidden;
}
.credit {
height: 25%;
font-size: 66.7%;
text-align: left;
overflow:hidden;
color:#fdff6e;
}
.username:before, .credit:after {
content:'';
height:100%;
vertical-align:middle;
display:inline-block;
}
.iconaward {
vertical-align: middle;
height: 20px;
width: 14px;
}
.ranktitle {
line-height: 60px;
height: 60px;
width: 15%;
background:#cd8912;
text-align: right;
padding-right: 0.125em;
}
.usercredit {
line-height: 60px;
height: 60px;
background:#ff0000;
width: 20%;
text-align: right;
padding-right: 0.5em;
}
I have 2 questions based on the linked(or above) code.
The 5 container div's width was set as:
.itemnumber 6%, .userprofile 14%, .nameandcredit 45%, .ranktitle 15%, .usercredit 20%. So in total they are 100%. But as you see, the last one .usercredit is not in the same line and there're margins between each div, which is not what I want.
for the .username, I have set overflow:hidden, but as you see, when there's a large string, the .username was totally disappeared. If there're spaces in the string, it will only hide the overflow part and show the front part. I want to know what's the problem?
I know it's a little bit messed up of a lot code here. But my question is as listed as above. Thanks in advance for any kind suggestion.
For the spacing, you have two problems:
Implicit spaces between inline-block elements, and
Defining widths for elements with padding.
Regarding username overflow, you have one issue:
Default word wrapping behavior is to wrap the whole word to the next line. You need to change that behavior.
Let's take a look at each of them:
Implicit Spaces
The problem is that your divs have a display: inline-block; style. Elements displayed as an inline-block have any white-space between them converted to a single space.
See the "Fighting the Space Between Inline Block Elements" article on CSS Tricks for more information on how to overcome this.
One fix, for instance, is to have the li element that is wrapping the divs to have a 0 font-size, and reset a non-zero font size to its children, e.g. in your CSS:
.font-size-0 {
font-size: 0;
}
.font-size-0 > * {
font-size: 12px;
}
Any of the links outlined in the link above would work; for example, removing spaces and newlines between your closing tag and opening tag would do the same thing, without forcing you to set and reset the font-size.
Widths for elements with padding
In CSS, a width is defined by default for an element to include only its content area (box-sizing: content-box; by default) and not the padding. Set the box-sizing to border-box and you'll be all set.
E.g.
.font-size-0 > div {
box-sizing: border-size;
}
Properly wrapping a single word without spaces
See this StackOverflow answer to see how to address the issue. You will basically need to add this to your .username rule:
.username {
...
word-wrap:break-word;
}
Final Result jsFiddle
The project is to create a micro-blogging website similar to Twitter. I chose to name the site Chirper (how clever of me). Each post is structured by a parent div, an avatar div and a content div. The avatar and content divs are displayed inline, but they are not aligned properly. Any help is appreciated.
HTML:
<div class="chirp">
<div class="chirp_avatar_region">
<img src="img/avatar/default.png" alt="Avatar" width="64" height="64">
</div>
<div class="chirp_content">
<p>
USER
<span class="timeStamp">2013-11-22 16:43:59</span>
</p>
<p>
COMMENT
</p>
<p>
ReChirp!
</p>
</div>
The div's aren't aligned how I want them to be (level and 100% of the parent).
I can't post images, so here is a link to an imgur page: http://imgur.com/Mn9mE5q
Relevant CSS:
body {
font-family: Verdana, Geneva, sans-serif;
color: #000;
background-color: #666;
font-size: 1em;
}
/* Containers */
div {
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border-style: solid;
border-width: 3px;
border-color: #000;
padding: 10px;
}
div.pane {
width: 70%;
background-color: 0099FF;
}
div.chirp {
border-width: 1px;
margin-bottom: -1px;
width: 80%;
padding: 5px;
}
div.chirp_avatar_region {
display: inline-block;
width: 10%;
height: 100%;
text-align: center;
/*border-style: none;*/
}
div.chirp_content {
display: inline-block;
width: 80%;
height: 100%;
/*border-style: none;*/
}
div.chirp_avatar_region > img, div.chirp_content > p {
margin-top: 0;
vertical-align: middle;
}
You can either float your inner divs then clear the float following the container
or
use vertical-align:top to position your divs at the top of the container
Not entirely sure, but what I think is happening is that by defining position:inline-block, it's putting them on the same line, and making the line-height the height of the chirp_content container. In a sense anyway.
Set to vertical-align:top; and it should solve it.
Ex.
.chirp_content, .chirp_avatar_region{ vertical-align:top; }
JS Fiddle
Give to the avatar_region a float: left, and remove its width: and height: setting. Remove the chirp_content div, it circumvents the inlining.
I have a site that looks kind of like this:
https://dl.dropbox.com/u/94786808/Example1.png
You'll notice the title "Post Production" is correctly aligned horizontally, but not vertically. When I try to align it vertically using the "margin top" command in css, this happens: https://dl.dropbox.com/u/94786808/example2.png
You can see that the title is now in the correct place, but the "box" containing it has moved as well. Here is the css involved:
Container (to hold it in place)
.container {
margin-left: auto;
margin-right: auto;
background-color:#FFF;
width: 960px;
height: 609px;
}
Post Production (the gradient box)
.postproduction {
width: 960px;
height: 203px;
background-image:url(../image/departments/bg.png);
opacity: 0.5;
-o-transition:.2s;
-ms-transition:.2s;
-moz-transition:.2s;
-webkit-transition:.2s;
}
and finally, Titlepost (the physical text)
.TitlePost {
margin-top: 101px;
margin-left: 35px;
font-family: 'NeouBold';
font-size: 30px;
}
Any ideas as to why this is happening?
Your code would probably be better structured like this:
Html
<div class="container">
<div class="postproduction">
<p>Post Production</p>
</div>
</div>
Css
.container {
margin-left: auto;
margin-right: auto;
background-color:#FFF;
width: 960px;
height: 609px;
}
.postproduction {
width: 960px;
height: 203px;
background-image:url(../image/departments/bg.png);
opacity: 0.5;
-o-transition:.2s;
-ms-transition:.2s;
-moz-transition:.2s;
-webkit-transition:.2s;
}
.postproduction p{
padding-top: 101px;
padding-left: 35px;
font-family: 'NeouBold';
font-size: 30px;
}
I'm trying to center a page and then make it 100% in height.
I have a div called "content" as the parent element of all elements in the HTML page.
What do I need to do next? I'd like to stay away from any CSS-hacks.
This is currently working in IE7, but not in Firefox 3.
EDIT: I added height: 100%; to #content that's what made it work in IE. Firefox still not solved.
My stylesheet so far is:
html, body
{
width: 100%;
height: 100%;
}
body
{
background-color: #000;
text-align: center;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
#content
{
position: relative;
text-align: left;
background-color: #fff;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 840px;
height: 100%;
padding: 0px 5px 5px 5px;
}
To center content, put it inside of an element that has a fixed width (important!) and has margin: auto;
There is no cross-browser was to make your div have 100% height unless you use javascript. If you are desperate for this functionality and are willing to use javascript, you can dynamically set the height of your content by setting it to the window height. I've never done this so I won't tell you how exactly, but it should be easy to find by googling.
Ahah! Think I got it for now. This works in Firefox 3 and IE7. I will test on some other browsers later. I do still need to figure out adding some padding around my content.
This requires this heirarchy on my page
html
|__body
|__div id=container
|__div id=content
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0px;
padding: 0px;
}
#container
{
position: absolute;
text-align: center;
background-color: #000;
width: 100%;
height: 100%;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
#content
{
text-align: left;
background-color: #fff;
margin: 0px auto;
width: 830px; /* padding thing I'm working on */
height: 100%;
}
body
{
background-color: #000;
text-align: center;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
#content
{
text-align: left;
background-color: #fff;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 90%;
height: 100%;
padding: 0px 5px 5px 5px;
}
Try this. This will work. Remove the html,body selector, you don't need that.
This works for me in Firefox 3 & Safari 3. Don't have access to IE.
html{
position:absolute;
top:0;
bottom:-1px;
left:0;
right:0;
height:100%;
text-align:center;
}
body{
text-align:left;
margin-left:auto;
margin-right:auto;
margin-top:0;
min-height:100%;
min-width:30em;
max-width:50em;
width:expression("40em");/*IE doesn't support max/min width*/
padding:0 1em 0 1em;
}
This should do it better.
No extra markup and/or id.
No need for javascript and/or expression in css.
Should work fine on all browsers.
<style>
html
{
background-color:red;
margin:0;
padding:0;
border:0px;
}
body{
background-color:yellow;
position:absolute;
left:-400px; /* 50% of content width */
width:800px; /* your content width */
margin-left:50%;
margin-top:0;
margin-bottom:0;
top:0;
bottom:0;
border:0;
padding:0
}
</style>
For centering the page, I typically just put the content div in the center tag, because margin-left/right:auto really doesn't work in all versions of IE.
For making the page the whole height, you can fake it a couple of ways. My favorite is to create a background image for the body tag that is centered horizontally but tiles vertically, so that would give the main div its white background. You probably still have a footer though, so you can position it with bottom:0 and that should keep it at the bottom and give you a content div which appears to extend for the whole page.