I have a "container" DIV which has 2 floating DIV's with different height inside, and when I apply the background property on the "container" DIV it doesnt work.
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
http://jsfiddle.net/arthurg/XUmsU/
How can I show the background on the container (using CSS)?
Add overflow:hidden; to the container. Like this:
#container{
height:100%;
background:red;
overflow:hidden;
}
http://jsfiddle.net/XUmsU/1/
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
#container{
height:100%;
background:red;
overflow:hidden;
}
#left{
width:100px;
background:green;
height:30px;
float:left;
}
You need to clear floats.
Add this <br style="clear: both"/> after those two floating divs.
HTML:
<div id="container">
<div id="left"></div>
<div id="right"></div>
<br style="clear: both"/>
</div>
http://jsfiddle.net/XUmsU/3/
There is other (new) methods for clearfix (with pseudo-classes :before and :after).
Related
I have a page with some divs. My page is pretty dynamic where I am showing and hiding divs based on user input.
I want a footer to always appear at the bottom and to have the other divs above it appear in a scroll. Since my data is populated asynchronously, my view loads but then once the content is injected onto the page, my footer seems to move
Here's a simple example of what I'm trying to do:
<div class="parent">
<div class="dynamic-div1">async div1</div>
<div class="dynamic-div2">async div2</div>
<div class="footer">Always appear at bottom</div>
</div>
try to add positions for footer
<div class="parent">
<div class="dynamic-div1">async div1</div>
<div class="dynamic-div2">async div2</div>
<div class="footer">Always appear at bottom</div>
</div>
in CSS
.footer
{
position:absolute;
bottom:0px;
}
in HTML
<div class="parent">
<div class="dynamic-div1">async div1</div>
<div class="dynamic-div2">async div2</div>
<div class="footer">Always appear at bottom</div>
</div>
in CSS
div.parent{
position:relative;
}
div.footer
{
position:absolute;
bottom:0px;
}
Looks like you are looking for the fixed footer at bottom. You can use position:fixed and apply positions like below.
.footer {
position:fixed;
height:20px;
background:#ccc;
bottom:0;
left:0;
right:0;
text-align:center;
}
<div class="parent">
<div class="dynamic-div1">async div1</div>
<div class="dynamic-div2">async div2</div>
<div class="footer">Always appear at bottom</div>
</div>
I have this HTML:
<div class="styles container">
<h1>Styles</h1>
</div>
<div class="preview container">
<h1>Preview</h1>
</div>
I want the first div to be static. Let's say its width is to be 265 pixels. The .preview div should be next to it, but it should be responsive (by shrinking the window this div should also shrink). I tried with setting a % to this div, but still it goes below. How can I fix this?
First of all, DIV it's block element, and starts rendering from new line. There are few techniques to change the behavior. If you don't need to support IE6/IE7 you can use inline-block CSS style, e.g:
<div>
<div style="width:20%; display: inline-block;">
<h1>1</h1>
</div>
<div style="width:70%; display: inline-block;">
<h1>2</h1>
</div>
</div>
This is your solution:
HTML:
<div class="parent">
<div class="styles">
<h1>Styles</h1>
</div>
<div class="preview">
<h1>Preview</h1>
</div>
</div>
CSS:
.parent{
width:100%;
white-space: nowrap;
}
.styles{
width:265px;
display:inline-block;
}
.preview{
width:auto;
display:inline-block;
}
Hope it will solve you problem.Check Fiddle.
Such a code:
<html>
<head>
<style type="text/css">
html, body {height:100px; width:200px}
body {margin:0}
</style>
</head>
<body>
<div style="background:red; height:100%">
<div style="background:green; height:100%; width:50px;">
</div>
<div style="background:yellow; height:100%;">
</div>
</div>
</body>
</html>
makes the second nested DIV appear outside of parent DIV in all browsers:
where I am expecting all the nested DIVs appear inside of parent DIV:
I want the yellow DIV to fill the rest of width regardless of parent DIV size.
Note that html, body {height:100px; width:200px} is made only to make a screenshot of a decent size. It should be html, body {height:100%; width:200%}
Update
a code with display: inline-block:
<div style="background:red; height:100%">
<div style="background:green; height:100%; width:50px; display:inline-block;">
</div>
<div style="background:yellow; height:100%; display:inline-block;">
lalala
</div>
</div>
produces
Use position property of css
<div style="background:red; position:relative; height:100%">
<div style="background:green; height:100%;position:absolute; top:0px;left:0px; width:50px;">
</div>
<div style="background:yellow;position:absolute;left:50px;top:0px; height:100%;width:100%;">
</div>
</div>
DEMO
OR
Use float property of CSS
<div style="background:red; height:100%">
<div style="background:green; height:100%;float:left;width:50px;">
</div>
<div style="background:yellow; height:100%;">
</div>
</div>
DEMO
You can use either position:absolute or float:left in this case.
An example for position:absolute has been answered by Ankit above
You can use float left for the green div:
<body>
<div style="background:red; height:100%">
<div style="background:green; height:100%; width:50px; display:inline-block; float:left"></div>
<div style="background:yellow; height:100%;"></div>
</div>
</body>
You can change the width of html/body or the red container div and the yellow div will grow/shrink appropriately:
http://jsfiddle.net/RapKB/1/
Edit:
Whoops, you don't need inline-block.
I want to know how to implement a strip of scrolling div boxes in a horizontal line which spans in full width of the browser.
<style>
.block_box{min-height:300px;overflow:hidden;position:absolute;top:400px;}
.block{ float:left; width:200;height:300px;background:grey;margin:10px;padding:20px;}</style>
<div class="block_box">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
</div>
I tried but after 4 or 5 block it is not hiding behind the browser instead it brakes to a new line
In your CSS add display:inline and white-space:nowrap;
.block_box{min-height:300px;overflow:hidden;position:absolute;top:400px;}
.block{ float:left; display:inline; white-space:nowrap; width:200;height:300px;background:grey;margin:10px;padding:20px;}
Here is about white-space. More detailed explanation
Here's a fiddle with a demo of what you want:
http://jsbin.com/anekos/1/edit
New CSS:
.block_box{ height:320px; width:100%; overflow:auto;top:100px;}
.block{display: table-cell; min-width:200px;height:300px;background:grey;margin:10px;padding:20px;
Use percentages for the width of each block so it will fit the width of your browser.
You need to set a width on the div with the class of "block_box"
try applying overflow-x: scroll; css style to your .block_box div.
Try to put an outer div with fixed width. And then use overflow-x:auto property like this
HTML Code :
<div class="outer_div">
<div class="block_box">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
</div>
</div>
CSS :
.block_box{height:200px;width:800px;overflow:hidden;position:absolute;top:400px;}
.block{ float:left; width:100;height:200px;background:grey;margin:10px;padding:20px;}
.outer_div{ width: 500px; overflow-x:auto;}
Here is the working demo : http://jsfiddle.net/AQr6h/2/
Example (with "OR" as text):
The idea is that on collapse of columns—i.e.: view on mobile sized-screen—it will appear betwixt submit and Click me.
How do I add some text onto the divider between rows?
Why don't you use a .span between your two forms ?
<div class="container">
<div class="row">
<div class="span5">
form 1
</div>
<div class="span2">OR</div>
<div class="span5">
form 2
</div>
</div>
</div>
Demo (jsfiddle)
<style>
.wrapper{
width:900px;
margin:0 auto;}
.left{
min-height:300px;
width:400px;
background-color:#9F0;
float:left;}
.right{
min-height:300px;
width:400px;
background-color:#9F0;
float:right;}
.mid{
padding-top:150px;
padding-left:40px;
min-height:150px;
width:60px;
float:left;
background-color:#C00;}
</style>
<body>
<div class="wrapper">
<div class="left">SUBMIT CONTENT HERE</div>
<div class="mid">OR</div>
<div class="right">CLICK ME CONTENT HERE</div>
</div>
I think this can help you. now you can style it if you want to add vertical bar on mid you can add that bar as a background image
then you can style it or add any DIV tags to it Its your wish.. ;)