hi i am just trying to change width and height of .content class. but its giving me like 100px of width and 100% of height even if i don't mention.
i have tried removing float but stil not working.what is the reason?
<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0}
#navbar{
width:100%;
background-color:black;
height:50px;
padding: 0 150px 0 150px;
position:relitive;
}
#logo{height:60px;
width:90px;
}
#container{
background-color:#E6E6E6;
width:78%;
margin: auto;
height:1000px;
text-align:center;
}
#navTable{
color:white;
position:absolute;
top:10px;
left:300px;
font-size:1.5em;
}
#navTable td{padding:0 10px 0 10px;
border-right:1px solid white;
}
#container div{width:32%;
height:100%;
border:1px solid black;
float:left;
}
.content{ /*this is not working[enter
background-color:yellow;
}
</style>
</head>
<body>
<div id='navbar'>
<img id='logo' src="http://i.cdn.cnn.com/cnn/.e/img/3.0/global/misc/cnn-logo.png"/>
<table id='navTable'>
<tr> <td>Home</td> <td>News</td> <td>Money</td> <td>Entertainment</td> <td>Travel</td> </tr>
</table>
</div>
<div id='container'>
<div id='leftDiv'>
<div class='content'>hhhh</div> <!--this-->
</div>
<div id='middleDiv'></div>
<div id='rightDiv'></div>
</div>
</body>
</html>
output:
it only gives me like 100px wide div here .
As #RLaaa said: "The reason is that you have style for #container div and it's affecting the result".
If you want to keep all styles that you have already wrote, you just need to use !important in your case for .content such properties, for example (random values):
.content {
background-color: yellow;
width: 500px !important;
height: 200px !important;
}
You can change this to any values you like. Here is the snippet:
body{margin:0}
#navbar{
width:100%;
background-color:black;
height:50px;
padding: 0 150px 0 150px;
position:relitive;
}
#logo{height:60px;
width:90px;
}
#container{
background-color:#E6E6E6;
width:78%;
margin: auto;
height:1000px;
text-align:center;
}
#navTable{
color:white;
position:absolute;
top:10px;
left:300px;
font-size:1.5em;
}
#navTable td{padding:0 10px 0 10px;
border-right:1px solid white;
}
#container div{width:32%;
height:100%;
border:1px solid black;
float:left;
}
.content {
background-color:yellow;
width: 500px !important;
height: 200px !important;
}
<div id='navbar'>
<img id='logo' src="http://i.cdn.cnn.com/cnn/.e/img/3.0/global/misc/cnn-logo.png"/>
<table id='navTable'>
<tr> <td>Home</td> <td>News</td> <td>Money</td> <td>Entertainment</td> <td>Travel</td> </tr>
</table>
</div>
<div id='container'>
<div id='leftDiv'>
<div class='content'>hhhh</div> <!--this-->
</div>
<div id='middleDiv'></div>
<div id='rightDiv'></div>
</div>
When you use the selector #container div it means every div element inside, including div inside div. You should use #container > div if you mean to apply it just to direct children.
Note you said you did not defined height:100%, but actually you do! Your problem is that your #container div selector applies also to #container div div.content element.
You can use !important or be more specific in your CSS selectors:
#container > div { ... }
#container > div > .content { ... }
Related
This is blowing my mind. I have a wrapper div and 2 divs inside it, one of the divs its height is 100% but does not stretch to fit the wrapper.
Here is a JSFIDDLE
The HTML:
<div class="wrapper">
<div class="inner_left">
Just<br />Some<br />Words
</div>
<div class="inner_right">
Anything
</div>
</div>
The CSS:
.wrapper {
width:auto !important;
height:auto !important;
margin:auto;
float:left;
padding:0;
background-color:#ccc;
}
.inner_left {
background-color:#f0f0f0;
width:270px;
height:auto !important;
border:1px solid #666;
float:left;
margin:auto;
padding:10px;
text-align:center;
}
.inner_right {
background-color:#f0f0f0;
width:200px;
height:100%;
border:1px solid #666;
float:right;
margin:auto;
padding:10px;
text-align:center;
}
I need the div (inner_right) to auto fit the height of the wrapper. So whenever the wrapper's height shrinks or stretches, this div stretches to the maximum height of the wrapper.
Anyone knows why my code isn't working? Appreciate any help.
Here is a solution using display:table and display:table-cell
.wrapper {
display: table;
width: 100%; /* whatever you want */
padding: 0;
background-color: #ccc;
}
.wrapper > div {
display: table-cell;
border: 1px solid #666;
background-color: #f0f0f0;
padding: 10px;
text-align: center;
}
.inner_left {
width: 270px;
}
.inner_right {
width: 200px;
}
<div class="wrapper">
<div class="inner_left">Just
<br />Some
<br />Words</div>
<div class="inner_right">Anything</div>
</div>
#showdev is right, the parent element needs to have its height explicitly set in order for the height of the child element to work the way you want it to.
Try to set 100% height to whole document:
html,body {
height: 100%;
}
and for wrapper class:
.wrapper {
width:auto !important;
height: 100%;
margin:auto;
float:left;
padding:0;
background-color:#ccc;
}
fiddle
If you look at the code below
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<style type="text/css">
#div1 { border:1px solid red; overflow:hidden; }
#div1 ul { list-style-type:none; margin:0; padding:0; }
#div1 li { display:inline; float:left; }
#div2 { background-color:pink; width:100%; height:40px; }
#div3 { background-color:yellow; width:40px; height:40px; }
</style>
<div id="div1">
<ul>
<li><div id="div2">div2</div3></li>
<li><div id="div3">div3</div3></li>
</ul>
</div>
</body>
</html>
I'm trying to get DIV2 to take up the remaining width of the parent div, once the 40px width of DIV3 has been assigned.
Is this possible?
My suggestion would be to use display:table and display:table-cell on the ul and li respectively, rather than float and display:inline. To make life easier, i have moved the id's to the li elements rather than the divs
html
<div id="div1">
<ul>
<li id="div2"><div>div2</div></li>
<li id="div3"><div>div3</div></li>
</ul>
</div>
CSS
#div1 { border:1px solid red; overflow:hidden; }
#div1 ul { list-style-type:none; margin:0; padding:0; display:table; width:100%; }
#div1 li { display:table-cell; }
#div2 { background-color:pink; width:100%; height:40px; }
#div3 { background-color:yellow; width:40px; height:40px; }
JS FIDDLE
A block-level element--like <div> or <li> or anything with display:block--will automatically absorb the available width. Something like this should work:
#div1 {
border: 1px solid red;
overflow: hidden;
}
#div2 {
background-color: pink;
height: 40px;
}
#div3 {
background-color: yellow;
float: right;
width: 40px;
height: 40px;
}
<div id="div1">
<div id="div3">div3</div>
<div id="div2">div2</div>
</div>
Note that the floated content will need to be placed first in order for this approach to work.
I need to show two <div>s next to each other and with different backgrounds.
Unfortunately, the background-color of the second <div> is ignored. I have read some posts and people suggest to add clear:both;. Unfortunately, it doesn't help. Is there any way how to get a background-color for .div2?
CSS:
.div1 {
margin-top:10px;
float:left;
background:blue;
width:382px;
padding:0 5px 10px 10px;
}
.div2 {
margin-top:10px;
width:374px;
background:red;
padding:0 10px 10px 0;
}
.clear {
clear:both;
}
HTML:
<div class="div1">DIV1</div>
<div class="div2">DIV2</div>
<div class="clear"></div>
Ok think i understood your problem. You want the element's next to each other.
Here is a CSS for this:
.div1 {
float:left;
background:blue;
width:382px;
padding:0 5px 10px 10px;
}
.div2 {
/* div1 will follow this */
margin-top:10px;
/* width of div1 + it's paddings */
margin-left:397px;
width:374px;
background:red;
padding:0 10px 10px 0;
}
.clear {
clear:both;
}
And here is a demo: http://jsfiddle.net/rvuyH/2/
just add float:left for div2 css like below to display both divs next to each other with background color
.div2{margin-top:10px;width:374px;float:left;background:green;padding:0 10px 10px 0;}
I have just changed the code given by #user3401335
JS FIDDLE DEMO. Please check it out
HTML:
<div class="div1">DIV1</div>
<div class="div2">DIV2</div>
<div class="clear"></div>
CSS:
.div1 {
margin-top:10px;
float:left;
background:blue;
width:50%;
padding:0 5px 10px 10px;
}
.div2 {
margin-top:10px;
width:45%;
background:red;
padding:0 10px 10px 0;
float:left;
}
What is going on here, I has tried floating the spans to the left, I have tried displaying them inline-block, inline ect... nothing seems to be working, I want any spans in the "filters" div to all go next to each other on a horizontal line!
HTML:
<div class="filters">
<span style="background-image:url(images/filters/grayscale.jpg)">Grayscale</span>
<span style="background-image:url(images/filters/smooth.jpg)">Smooth</span>
<span style="background-image:url(images/filters/contrast.jpg)">Contrast</span>
<span style="background-image:url(images/filters/brightness.jpg)">Brightness</span>
<span style="background-image:url(images/filters/colorize.jpg)">Colorize</span>
</div>
CSS:
.filters {
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
overflow:scroll;
}
.filters span {
margin:10px;
border-radius:15px;
background-size:contain;
background-repeat:no-repeat;
width:175px;
height:65px;
font-size:20px;
padding-top:2.2em;
float:left;
}
you have to change your code in the following way,
.filters {
position:relative;
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
overflow:scroll;
}
then for each span, you have to change left: 0px to the amount you want the filter effect to move from the left side.
.filters span {
position:absolute;
left: 0px;
margin:10px;
border-radius:15px;
background-size:contain;
background-repeat:no-repeat;
width:175px;
height:65px;
font-size:20px;
padding-top:2.2em;
float:left;
}
I have added position:relative; on filter box,
and position: absolute; and left: 0px;
Change the width from 100% to a larger value (in % or px) and a containing div if you want the user to scroll horizontally through the spans.
SEE JSFIDDLE EXAMPLE
.container {
width:300px;
height:8em;
overflow-x:scroll;
overflow-y:hidden;
}
.filters {
background-color:#1a1a1a;
height:8em;
width:1000px;
border-radius:0px 0px 15px 15px;
}
<div class="container">
<div class="filters">
...
</div>
</div>
Edit: Solution
Here is you fiddle working: Working jsFiddle here
Original Answer
Use white-space: nowrap; css for surrounding container. If you want to get rid of autospaces between the spans as well concatenate them with <!-- --> html comments.
HTML:
<div class="filters">
<span>Grayscale</span><!--
--><span>Smooth</span><!--
--><span>Contrast</span><!--
--><span>Brightness</span><!--
--><span>Colorize</span>
</div>
CSS:
.filters {
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
overflow:scroll;
white-space: nowrap; /* added */
}
.filters span {
margin:10px;
border-radius:15px;
background-size:contain;
background-repeat:no-repeat;
width:175px;
height:65px;
font-size:20px;
padding-top:2.2em;
/*float:left; removed*/
}
I am trying for a or b to to match their height when one or the other one extends.
<html>
<head>
<style>
#main{
width:300px;
position: relative;
margin: 0 auto;
}
#a{
position:absolute:
bottom:0px;
width:50px;
border: 1px solid #000;
float:left;
}
#b{
position:absolute:
bottom:0px;
width:200px;
border: 1px solid #000;
float:left;
}
</style>
<body>
<div id="main">
<div id='a'><h1>1</ht><h1>1</ht><h1>1</ht><h1>1</ht></div>
<div id='b'>2</div>
</div></div></head></body>
I have a very simple solution. Use css attribute display: table-cell; in .a{} & .b{} style like this:
.a, .b{
display: table-cell;
width:100px;
vertical-align:middle;
text-align:center;
}
See the Demo: http://jsfiddle.net/rathoreahsan/qcCPG/6/