I am having the hardest time trying to figure out this (should be) simple css:
Website is here:
http://mibsoftware.us/fct/index.php
I'm simply trying to get my #leftcolumn and #maincolumn to be inside the #content_container, yet whatever I'm doing isn't working at all. I'd like for the #content_container to be a dynamic height since the height of #leftcolumn and #maincolumn change depending on the page you are on.
From the framework of my css it should work fine, so I must be missing something in my .css file declaring these divs. Any help would be greatly appreciated, as this will be a great learning experience for me.
Set overflow:hidden on your #content_container.
Here is a nice resource to learn more about clearing floats and such.
You could also set .clearfix class on your #content_container and define it in CSS like this:
/* Clearing floats without extra markup
Based on How To Clear Floats Without Structural Markup by PiE
[http://www.positioniseverything.net/easyclearing.html] */
.clearfix:after, .container:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow:hidden;
}
.clearfix, .container {display: block;}
Related
http://alexandermasters.com/flora/2015/10/05/corey-boyce/
Trying to horizontally center the image within its respective container.
Can't seem to isolate the correct element with which to apply
display: block;
margin-left: auto;
margin-right: auto;
Have progressively worked my way through the code starting from the image and moving up to no avail.
Try this CSS code
.gallery-item {float:none; margin:0 auto; text-align:center}
targeting the IMG tag would not work because it is nested in another element, so you have to center the parent of the img.
when there is a float, margin:auto will not work properly
If you're not concerned about IE9 compatibility, you can easily achieve this by applying display: flex to the parent <dt> element.
Check out Chris Coyier's Complete Guide to Flexbox if you haven't already read up on this beautiful member of CSS3. I also recommend this article by Paddi McDonnell.
Flexbox underwent some prefixing inconsistencies, so it would be wise to have a fallback style if those users are important to you.
try this:
.gallery {
text-align: center;
}
.gallery dl {
display: inline-block;
float: none;
}
(also clear your browser cache)
Main markup
<body>
<div id="contenedor">
....
</div>
<div class="fLeft"> <footer > ... </footer> </div>
</body>
CSS
body{
}
#contenedor{ float: left; width:100%;}
.fLeft{ float:left }
I guess best way is to firebug the page..
http://209.51.221.243/integracion/login.php
As you can see, the footer is above the middle of the page behind the content...
At first, I thought it might be that you didn't clear your float. But then I noticed that each floated element is absolutely positioned. By applying position:absolute to an element, you're ripping it out of the flow of the document. The best way to fix this is to remove position:absolute from your "widgets", but then your design won't appear how you currently have it.
An idea/suggestion to workaround your limitations is to fix the footer to the bottom of the page. Apply the following to <footer>:
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
You'll notice that your footer will stay put as you scroll on the page, and that can very possibly be less than ideal, but I can guarantee it'll stay on the bottom of the page. Otherwise, you're looking at reworking your styles because of the misuse of some properties.
You use floating divs before footer, so, in order to put the footer after those divs, the css of your footer should contain: clear: both;, or clear: left;, in your case.
Docs: http://www.w3schools.com/cssref/pr_class_clear.asp and (of, course) https://www.google.com/search?q=css+clear :)
UPDATE2: I realized I was wrong. This answer does not work in this particular case.
First: This is a pretty good starting point for any footer. Use it.
Second: You may have noticed that the container that has all the floating boxes (.centerCnt) isn't big enought to fit them all. To fix this you need to use a good .clearfix. There are many to choose from, but I use this one:
/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. - j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }
You will need this on .centerCnt otherwise the Sticky Footer won't work.
UPDATE: Simply using the clearfix would probably fix your issue. Add the code above to your CSS and give .centerCnt the class clearfix.
I have the following:
<div id="tab-notes" class="clearfix">
<textarea cols=100 rows=15 class="full-width" id="dialogNotes" name="Pages">#Model.Notes</textarea>
</div>
I have added a clearfix class but it seems that the DIV does not stretch to fit the height of the textarea. Is there something simple that I am missing?
.clearfix:after, .block-controls:after, .side-tabs:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
width: 0;
}
giving your #tab-notes a background-color you'll see that it does stretch to the textareas high (like it should) if there really aren't any other css-rules that affect these elements.
you can see it in action here: http://jsfiddle.net/Mqke4/
the clearsfix seems to be senseless just given this snippet and doesn't change anything ( http://jsfiddle.net/Mqke4/1/ ). given this, there must be styles defined for .full-width, #tab-notes, #dialogNotes (or anything like that) causing this problem.
Is your textarea applied with float: left or float: right ?
If so, remove the float property from textarea.
But if you have to use that property,
the easiest way to solve the problem is to also apply the float: to your div too.
Or you can change the display type of your div to block by using display: block
There's more way to solve this problem.
But I think these are the easiest ones.
I've been working on a web application using Bootstrap, and have come across odd behaviour in my columns that I cannot seem to figure out.
Most of the CSS I'm using is just Twitter bootstrap defaults. I've attached screenshots of the HTML structure and the problem itself.
The Issue
It appears that the first div in my main-content div is expanding to match the size of the sidebar, which makes no sense to me.
Also upon further investigation it appears that each child within my #main-content div contains the following CSS, which causes the issue. How might I circumvent it?
.row-fluid:after {
clear: both;
}
.row-fluid:before, .row-fluid:after {
content: "";
display: table;
}
.row-fluid:after {
clear: both;
}
Here is the actual page: http://d.titanlabs.ca/ai2/test.html
May be i know the reason just give float to your #main-content also. write like this:
#main-content {
float:left;
margin-left: 45px;
padding: 25px 0;
width:860px;
}
UPDATED
#main-content{
margin-left: 45px;
overflow:hidden;
}
I'm forced to use a website that had too many distracting elements and I'm trying to adjust it using custom CSS. I stumbled upon this wonderful navigation links:
______Link#1__________
______Link#2__________
Can I remove those _'s only by using CSS properties that currently work in latest stable version of FF?
If the links are similar in width, you could hide the offending underscores out of view through overflow: hidden:
a {
display: block;
width: 50px;
overflow: hidden;
text-indent: -45px
}
If they do have different widths, you could target each one individually through the nth-of-type selector...
ul.nav li:nth-of-type(3) a {
display: block;
width: 70px;
overflow: hidden;
text-indent: -45px
}
It's an interesting challenge, good luck!
http://jsfiddle.net/F24rh/
No; You can currently only add text before and after elements using CSS (and even that support is limited).
To do what you're attempting, consider writing a Greasemonkey script.