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.
Related
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 { ... }
My problem is with child div.
I have code:
<div id="menu" class="menu">
<div class="logo"></div>
<div class="menulist">
<span>First</span>
<span>Second</span>
<span>Third</span>
<span>Fourth</span>
</div>
</div>
css:
#menu{
width:100%;
z-index:998;
height:64px;
max-height:auto;
overflow-y:content;
position:fixed;
background-color: rgba(0, 0, 0, 0.63);
box-shadow:0px 0px 5px black;
}
.logo{
height:100%;
width:70px;
background-color:red;
display:inline-block;
}
.menulist{
display:flex;
height:100%;
width:70vw;
background-color:red;
display:inline-block;
}
.menulist span a{
font-family: Segoe UI Light;
padding:0px;
margin:-50px;
position:relative;
height:32px;
font-size:30px;
display:inline;
margin-left:auto;
margin-right:auto;
}
Without any content on .menulist div this div is fit to #menu, but after add some span's he isn't in #menu (lower). Can you explain me why?
Here's Jsfiddle project:
https://jsfiddle.net/wd3tjgk8/3/
I've edited your Fiddle not only to achieve the desired effect, but to clean up your code a bit. Instead of using inline or inline-block, I float everything in #menu to the left with
#menu *{
float: left;
}
By floating, you stop every element from having white-space and line-space. Besides that, I've removed the spans and some unnecessary mark-up.
Here's the Fiddle.
Hope this helps
Use vertical-align: top; on .menulist to fix this: https://jsfiddle.net/wd3tjgk8/5/
.menulist {
height: 100%;
width: 70vw;
background-color: red;
display: inline-block;
vertical-align: top;
}
Why? display: inline-block; will position it in the middle if not set to top ;)
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
I'm trying to make the div have same height so i used display table , problem that i having is the width will grow.
As an example try adding content in the tableright , when it is exceeded the width , it will not break to the next line but it will expand horizontally to the tableleft.
Please Advice.
Below is the sample code
<div id="maintable">
<div id="table-row">
<div id="tableleft></div>
<div id="tableright></div>
</div>
</div>
<style>
#maintable
{display:table;
width:100%;
}
#table-row
{
display:table-row
width:100%;
}
#tableleft
{
width:60%;
display:table-cell;
}
#tableright
{
width:40%;
display:table-cell;
}
</style>
You made few syntax error there.
Further to make sure if one big un spaced word is placed in table-cell i have used "table-layout: fixed;"
check this fiddle: http://jsfiddle.net/5q9K8/17/
The HTML:
<div id="maintable">
<div id="table-row">
<div id="tableleft">lorem</div>
<div id="tableright">ipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsum</div>
</div>
</div>
The Css:
#maintable
{
display:table;
width:100%;
table-layout: fixed;
word-wrap:break-word;
}
#table-row
{
display:table-row;
width:100%;
}
#tableleft
{
width:60%;
display:table-cell;
background: #eef;
}
#tableright
{
width:40%;
display:table-cell;
background: #efe;
}
Add width as accordingly here just an example to show div height equal to table height.
css
.maintable {
width:100%;
display: table;
border: 1px solid blue;
}
.maintable .table-row {
display: table-row;
border: 2px solid black;
}
.maintable .table-row .tableleft, .maintable .table-row .tableright {
display: table-cell;
border: 4px solid red;
}
.tableright {
width: 60%;
}
.tableleft {
width: 40%;
}
DEMO
Final DEMO
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/