In my script all content is loaded from a database. It's basicly one page, that retreives its info from the database, depending on which url is clicked. The content is placed into a div. So the height of the div should auto increase, in order to fit the content. With the code I have right now it doesn't. It shows all the content, but the div stays in one size. How do I solve this?
<div class="grid-item grid-item--width100 container">
<div class="img"><i class="fa fa-wrench fa-3x"></i></div>
<div class="innerContainer">
<font class="txt_registerB">Updates</font><font class="txt_registerN"></font>
<br><br>
//Content here
<br>
</div>
</div>
CSS
.container {
background-color: #FFFFFF;
}
.innerContainer {
position: absolute;
top: 15px;
left: 15px;
text-align: left;
padding-right: 15px;
}
.img {
text-align: right;
padding: 15px;
color: #000;
opacity: 0.3;
}
.grid-item {
min-width:160px;
float: left;
margin-bottom: 10px;
}
.grid-item--width100 {
width: calc(100% - 40px);
}
Related
This code works on Google Chrome, but the height is minimized in IE11; it expands only when I click on the links in menu. And also the font size increases in IE; I need help.
I tried setting the parent div height to 1000px; this way it does not minimize the height. But when you click on the link to display content it does not display all the content. Any help will be highly appreciated.
html {
font-size: 62.5%;
height: 100%;
}
body {
font-size: 1.4rem;
height: 100%;
}
#media (min-width: 1200px) {
.container-fluid-full {
overflow: hidden;
position: relative;
height: 100%;
}
#content {
width: 85.578%;
padding: 28px;
margin: 0px 0px;
margin-left: 14.422% !important;
height: 100%;
}
#sidebar-left {
background: #eeeeee;
border-style: solid;
border-right: thick #edf0f4;
margin-left: 0px !important;
position: absolute;
height: 100%;
}
<div class="container-fluid-full">
<div class="row-fluid">
<!-- start: Main Menu -->
<div id="sidebar-left" class="span2">
</div>
</div>
<div id="content">
</div>
</div>
I have a grid of pictures that displays fine by themselves, but I cannot place this grid next to a sidebar.
To build the grid, I place the pictures in an <ul>, and set the property for <li> display: inline-block.
When trying to incorporate this grid next to a sidebar div, it is not placed to the sidebar's side; instead, it goes under the sidebar. Placing text does what I want. Now, when I omit display and float on the <li>, the pictures show up in the right place (next to the sidebar), but I want the pictures displayed in a grid, not a single column.
JSFIDDLE LIVE DEMO
Here's my CSS
ul.cats li {
width: 200px;
display: inline-block;
/* will not display to the right of sidebar */
/* float: left; */
/* no good either */
text-align: center;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
border: 1px solid black;
}
.site_body_container {
position: relative;
width: 100%;
height: 100%;
background-color: #ffffff;
}
.site_sidebar {
position: relative;
float: left;
height: 95%;
color: white;
}
.site_content {
position: relative;
float: left;
padding: 10px;
border: 5px solid blue;
height: 100%;
}
and HTML
<div class="site_body_container">
<div class="site_sidebar">
<ul>
<li>Sidebar 1</li>
... etc ...
</ul>
</div>
<div class="site_content">cats
<div class="container">
<div id="links">
<ul class="cats">
<li> <img src="http://placekitten.com/50/30" /><br>Kitty
</li>
<li> <img src="http://placekitten.com/50/30" /><br>Kitty
... etc ...
</li>
</ul>
</div>
</div>
</div>
</div>
You need to explicitly set the width of the container holding the pictures, something like:
.site_content {
position: relative;
float: left;
padding: 10px;
border: 5px solid blue;
height: 100%;
width: 450px;
}
Otherwise, it will take up the whole width, which causes it to break onto the next line, underneath the left sidebar.
Here's a fiddle: http://jsfiddle.net/9Wg3T/8/
After a bit more searching I found an alternate solution which is what I am currently using.
I can make the sidebar's width variable (determined by the size of its contents) and the "cats" gallery take up the remaining width to the sidebar's right:
.site_sidebar {
position: relative;
float: left;
height: 95%;
background-color: #eeffff;
padding: 0;
}
.site_content {
position: relative;
padding: 0;
overflow: hidden;
}
The trick is setting .site_content's overflow to hidden. Explanation in this answer.
![enter image description here][1]I want to make a horizontal line after my text.
Instead of hiding the content that goes out of the div (#line), it doesn't display it at all.
The #line div has to be bigger than the #textline div because I don't know the size of the text div.
Edit: Here is the Jfiddle http://jsfiddle.net/wakary/8tTzz/2/
Put #line {width: 100;} to see what I want to accomplish.
Edit: (what I want to acheve, the title changes):
Hi I have made some small changes to your code
#textline{
position: relative;
width: 400px;
height: 36px;
margin-left: 20px;
overflow: hidden;
}
#text{
position: absolute;
color: green;
height: 36px;
background:white;
padding-right:10px;
}
#line{
position: absolute;
height: 10px;
width: 80%;
border-bottom: 1px solid green;
}
And the HTML like this
<div id="textline">
<div id="line"></div>
<div id="text">Text</div>
</div>
So in this case you will have one div over the other, the line will cover all it´s container, and the text will hide some part of this line.
Removing the width of the container element works.
Demo
HTML
<div id="textline">
<div id="text">Text</div>
<div id="line">
<div id="upspace"></div>
<div id="ll"></div>
</div>
</div>
CSS
#textline
{
height: 36px;
margin-left: 20px;
}
#text
{
float: left;
color: green;
height: 36px;
}
#line
{
float: left;
height: 36px;
width: 400px;
}
#upspace
{
height: 10px;
}
#ll
{
height: 1px;
background-color: green;
}
My background images have not been spanning the full width of the browser when viewed on an iPad. This has happened more than once now, so it must be in the way I'm writing the CSS.
Here is an example of a footer whose bg image is stopping about 70% of the way on iPad- it has three columns floating within.
I've put the full project up here:
https://github.com/christineh/TJ-portfolio
HTML:
<footer>
<div class="footer_invs">
<div class="footer">
<h1></h1>
<p></p>
</div>
<div class="footer">
<h1></h1>
<img src="" width="32" height="32" border="0">
</div>
<div class="footer3">
<h1></h1>
<img src="">
</div>
</div>
</footer>
CSS:
footer {
background: url(images/footer/background.jpg) repeat-x;
width: 100%;
height: 113px;
margin-top: 250px;
overflow:hidden;
overflow-x:hidden;
}
.footer_invs {
background: url(images/footer/corner.png) no-repeat 186px 0px;
width: 1018px;
height: 78px;
padding-left: 200px;
padding-top: 32px;
}
.footer {
float: left;
width: 275px;
}
.footer h1 {
padding-bottom: 8px;
}
.footer p {
color: #FFF;
padding-bottom: 0px;
line-height: 16px;
padding-top: 0px;
}
.footer img {
padding-right: 10px;
}
.footer3 {
float: left;
width: 120px;
padding-left: 70px;
}
.footer3 h1 {
padding-bottom: 8px;
}
Is there an obvious fix that I'm missing?
I tried using the suggestion above i.e. min-width:1024px in the body tag but it did not work. After a lot of searching I discovered adding it to the html tag also works.
Example:
html {
min-width: 1024px;
}
Pretty sure iPad screen width is 1024px. Is that set anywhere?
body{
min-width:1024px;
}
Note: I've not got mine on me to test.
i have a problem with float divs. i try everything, i search everywhere but i cannot find (maybe i use wrong keywords to search, i dont know)
here is the codes:
<div class="mbody">
<div class="mheader"> header content </div>
<div class="mmenu"> menu content </div>
<div class="mcontent">
<div class="content-right">
<div class="r-cont">
<div class="r-cont-header"> header goes here </div>
<div class="r-cont-content"> <p>• There is a sample right content...</p></div>
</div>
</div>
<div class="content"> contents goes here </div>
</div> <!-- mcontent ends here -->
<div class="mfooter"> footer content </div>
</div> <!-- mbody ends here -->
and here goes css codes:
.mbody {
clear: both;
width: 920px;
position: relative;
overflow: visible;
height: auto;
margin: 0px auto;
}
.mheader {
height: 163px;
width: 856px;
background-image: url(img/header.png);
padding: 32px;
}
.mmenu {
height: 40px;
width: 920px;
background-image: url(img/menu-bg.png);
}
.mcontent {
width: 880px;
overflow: visible;
padding: 20px;
height: auto;
background-color: #FFF;
clear: both;
}
.content-right {
width: 200px;
float: right;
}
.content {
margin-right: 220px;
}
.r-cont {
clear: both;
width: 200px;
}
.r-cont .r-cont-header {
background-image: url(img/menu-head.png);
height: 32px;
width: 168px;
line-height: 32px;
color: #FFF;
padding-left: 32px;
font-weight: bold;
font-size: 16px;
}
.r-cont .r-cont-content {
background-color: #F8AF6B;
font-size: 12px;
padding: 6px;
}
.mfooter {
height: 60px;
width: 920px;
background-color: #F58220;
background-image: url(img/footer-bg.png);
clear: both;
}
here we go...
if .content's content is smaller then .content-right, .mcontent's heights is equal to m.content's min-height, so i didn't set it. it equals to .mcontent's padding-top and bottom. left out area has not any background. i cannot set .mbody background because i use rounded the corners with JavaScript and if i use a background corner's outside has the color of .mbody ...
my customers still use ie6, so i cannot any css effects and css3 codes...
thanks in advance...
.class1 .class2 cause problems in IE6 try to use #id1 .class1 like these places .r-cont .r-cont-content
I think you're problem is what's called the 'collapsed parent', i.e. the container div is not as tall as the content within in.
If this is your problem then there are four solutions. I would recommend changing the overflow value of your .mcontent div to hidden (from visible). This solution is compatible with IE6 as you have set a width of the parent.
.mcontent {overflow: hidden;}
Read the section "Fixing the Collapsed Parent" at the link below for more information (and the other three solutions):
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/