EDITED:
I have the following HTML code:
<div class="div-table">
<div class="div-table-row">
<div class="div-table-first-col">
<div>11:00</div>
</div>
<div class="div-table-col">
<div style="height: 11"></div>
<div class="appuntamentoContainer">
<div class="appuntamento" style="height: 25px">11:12 - 12:35</div> //--> need to stretch to bottom
</div>
</div>
<div class="div-table-col">
<div style="height: 0"></div>
<div class="appuntamento">11:00 - 11:45</div>
<div class="appuntamento">11:00 - 12:00</div>
<div class="appuntamento">11:45 - 12:30</div>
</div>
<div class="div-table-col">
<div style="height: "></div>
</div>
<div class="div-table-col">
<div style="height: "></div>
</div>
</div>
</div>
and CSS:
.div-table div.appuntamento {
background-color: #f3f2de;
padding: 3px 5px;
border: 1px solid #d7dde6;
border-radius: 5px;
}
.div-table {
display:table;
width:auto;
}
.div-table-row{
display:table-row;
width:auto;
clear:both;
height: 45px;
}
.div-table-col {
float:left;/*fix for buggy browsers*/
display:table-column;
width:154px;
}
.div-table-row .div-table-col{
border-left: 1px solid #d7dde6;
border-right: 1px solid #d7dde6;
border-top: 1px solid #d7dde6;
min-height: 44px;
}
.div-table-first-col {
float:left;/*fix for buggy browsers*/
display:table-column;
text-align: right;
width: 45px;
}
.div-table-first-col div{
padding: 3px 5px;
}
Here the fiddler
Notice the vertical borders. On the left side how it actually is, on the right side how it should. How do i stretch the div to the bottom?
Use the flexbox layout model. Just add display: flex; to .div-table-row, and remove any float or display property.
Here's the JSFiddle.
add height: 100% on parents table and td.
table {
height: 100%;
}
td {
height: 100%;
}
for reference look here: Make div stretch to fit td height
Check this out for some dynamic behaviour:
jQuery
var a=$(".second").outerHeight();
$(".first").height(a);
$(".third").height(a);
https://jsfiddle.net/1cejh0dL/6/
Related
I am trying to achieve this layout.
left column fixed size
right column fluid, it may have x number of elements inside, for example up to 4 divs 50px wide (this is done dynamically) so it must be max 200px wide, or if it has 3 such elements, then it must be 150px wide...
center column fluid, takes all the rest space
The closest I have comes is this:
#container {
overflow:hidden;
width: 100%;
}
#leftcol {
border: 1px solid #0f0;
float: left;
width: 80px;
}
#rightcol {
border: 1px solid #0f0;
float: right;
}
#centercol {
border: 1px solid #000;
margin-left: 80px;
}
.box{
width:50px;
height:20px;
background:red;
float:left;
}
<div id="container">
<div id="leftcol">
fixed 80px
</div>
<div id="rightcol">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div id="centercol">
fluid center
</div>
</div>
but center fluid is not correct width.
I can change some html if it will be easier to achieve desired effect.
You can do it with the Flexbox:
body {margin: 0}
#container {
display: flex; /* displays flex-items (children) inline */
overflow: hidden;
}
#leftcol {
border: 1px solid #0f0;
width: 80px;
}
#centercol {
flex: 1; /* takes the remaining horizontal space */
border: 1px solid #000;
}
#rightcol {
display: flex;
border: 1px solid #0f0;
max-width: 200px; /* adjust to your needs */
}
.box {
width: 50px;
height: 20px;
background: red;
}
<div id="container">
<div id="leftcol">
fixed 80px
</div>
<div id="centercol">
fluid center
</div>
<div id="rightcol">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</div>
I am trying to place two div side be side but I am not able to. I have done google and previous stackoverflow search about same problem and tried to use those but it didn't work for me.
Here is my source:
HTML:
<section id="controls" class="body">
<div id="TM" class="body">
<img src="images/maps.PNG" height="100%" width="100%" alt="location" class="photo" />
</div>
<div id="wrapper" class="body">
<div id="BL" class="body"></div>
<div id="BR" class="body"></div>
</div>
</section><!-- /#controls -->
<section id="extras" class="body">
<div class="blogroll">
</div><!-- /.blogroll -->
<div class="social">
</div><!-- /.social -->
</section><!-- /#controls -->
CSS:
#controls { height: 600px; width: 800px }
#wrapper { width: 800px; height: 300px }
#TM { width:100%; border:1px solid black; height: 300px }
#BL { width:50%; border:1px solid black; height: 300px; float:left; margin-top: 2px; margin-left: 2px; }
#BR { width:50%; border:1px solid black; height: 300px; float:right; margin-top: 2px; margin-left: 2px; }
Here is output from current code:
You should decrease the width of #BL and #BR elements or remove margin-left. Your siblings take more than 100% of parent width. 100%+margins.
Use box-sizing: border-box
*{box-sizing: border-box}
#controls {
height: 600px;
width: 800px
}
#wrapper {
width: 800px;
height: 300px
}
#TM {
width: 100%;
border: 1px solid black;
height: 300px
}
#BL {
width: calc(50% - 2px);
border: 1px solid black;
height: 300px;
float: left;
margin-top: 2px;
}
#BR {
width: 50%;
border: 1px solid black;
height: 300px;
float: right;
margin-top: 2px;
}
<section id="controls" class="body">
<div id="TM" class="body">
<img src="images/maps.PNG" height="100%" width="100%" alt="location" class="photo" />
</div>
<div id="wrapper" class="body">
<div id="BL" class="body"></div>
<div id="BR" class="body"></div>
</div>
</section>
<!-- /#controls -->
<section id="extras" class="body">
<div class="blogroll">
</div>
<!-- /.blogroll -->
<div class="social">
</div>
<!-- /.social -->
</section>
<!-- /#controls -->
Your problem is Float in css.
if you want to place two divs side by side you should style both of them same float.
#left_one{float:left}
#right_one{float:left}
#BL { width:50%; border:1px solid black; height: 300px; float:left; margin-top: 2px; margin-left: 2px; }
#BR { width:50%; border:1px solid black; height: 300px; float:left; margin-top: 2px; margin-left: 2px; }
To fit 2 DIVs side by side, Either they should be inlined block or floated blocks. In addition of that;
Container width = OuterWidth of Div1 + OuterWidth of Div2
OuterWidth of Div = margin-left + DIV's width + margin-right + 2 x border width
Since you have 1px border and 2px margin one side. You need to subtract them from the width of div.
I cant seem to be able to do this with relative and absolute positioning like I have with other things, but what I want to achieve is to have a div, with another div within it, however this inner div must appear outside the outer div on screen.
<div class="OuterDiv">
<span>Other things</span>
<div class="InnerDiv">
<span>Inner content</span>
</div>
</div>
EDIT : OK, so this I think is more complex than people are thinking. Using position relative and absolute I have already gotten other things on my page to work. What I have when I try this problem using positioning is
And then disappears completely when moved far enough outside of the outer div
More of my code,
<div class="Item Menu Active" style="display: inline-block;">
<div class="ItemList" style="left: -315.859375px;">
<div class="Item" style="display: inline-block;">
<span>N</span>
<div class="ItemList">
</div>
</div>
<div class="Item" style="display: inline-block;">
<span>O</span>
<div class="ItemList">
</div>
</div>
<div class="Item" style="display: inline-block;">
<span>P</span>
<div class="ItemList">
<div class="Item ClickItem">
<span>p1</span>
<div class="ItemList">
</div>
</div>
</div>
</div>
<div class="Item" style="display: inline-block;">
<span>Q</span>
<div class="ItemList">
</div>
</div>
</div>
</div>
.Item {
display: inline-block;
position: relative;
white-space: nowrap;
padding: 5px 10px 5px 10px;
cursor: pointer;
}
.ItemList {
display: none;
z-index: 1;
min-width: 75px;
position: absolute;
top: 100%;
left: 0px;
overflow-y: scroll;
overflow-x: hidden;
white-space: initial;
padding: 5px 5px 5px 5px;
background-color: white;
border: 1px solid black;
cursor: default;
}
EDIT 2 : Yes overflow:visible was my problem, issue is that overwrites the overflow-x and overflow-y that I am already using on the .ItemList for vertical scrolling on smaller screens. Any further suggestions?
You could position absolutely the inner div with the respect to the body as follows:
* { box-sizing: border-box; }
html {
height: 100% }
body {
position: relative;
padding: 10px;
min-height: 100%;
margin: 0;
border: 10px solid red; }
.OuterDiv {
width: 50%;
border: 10px solid green; }
.InnerDiv {
position: absolute;
width: 20%;
right: 10px;
border: 10px solid blue; }
<div class="OuterDiv">
<span>Other things</span>
<div class="InnerDiv">
<span>Inner content</span>
</div>
</div>
Note that in this case you must ensure that the body is high enough to contain the absolutely positioned inner div.
I feel like you shouldn't be structuring your HTML this way if this is the desired result: why not just have the inner div placed outside the parent's hierarchy? Either way, something like this should work:
<body>
<div id="outer">
<div id="inner">
</div>
</div>
</body>
And CSS
#body
{
position:relative;
}
#inner
{
position:absolute;
right:0;
top:30px;
}
You need to use position rule to set your elements to display within each-other.
#Outer {
position: relative;
width: 300px;
height: 180px;
border: 3px solid red;
}
#Inner {
position: absolute;
width: 50%;
height: 50%;
border: 3px solid blue;
margin: 5%;
}
<div id="Outer">
<div id="Inner"></div>
</div>
Try this out :
.OuterDiv{ position:relative; width:80px; height:80px; border:5px solid green }
.InnerDiv{ position:absolute; top:0; right:-100px; width:80px; height:80px; border:5px solid red }
<div class="OuterDiv">
<span>Other things</span>
<div class="InnerDiv">
<span>Inner content</span>
</div>
</div>
Edit:
It disappears because of overflow-x: hidden;
Previous:
http://jsfiddle.net/1k1rfrn3/
You should avoid hacking your DOM with CSS.
.OuterDiv{
border-style: solid;
border-width: 5px;
color: blue;
position:absolute;
overflow: visible;
}
.InnerDiv{
border-style: solid;
border-width: 5px;
color:red;
position:absolute;
left:500px;
}
How to I align text to the right side of the image icon like the one in the example picture.
I would usually use "float:left" but it's for a mobile responsive design so I prefer not using things like "float:left" because it ruins the red divs height with responsive designs.
I have to align the title, subsitle and a little square image.
It is easy to use float: left and NOT break the height of red border div.
You only have to add display: table-cell to the .app_top block. Here's the solution:
.app_top {
display: table-cell;
}
.app_top img {
float: left;
}
See the working example. Here's the code.
You could use display: inline-block instead.
#main-container {
border: 5px solid #3F3F3F;
width: 270px;
}
.container {
width: 250px;
height: 200px;
border: 5px solid #7F0008;
margin: 5px;
}
.box {
display: inline-block;
vertical-align: top;
width: 85px;
height: 85px;
background: #446C74;
margin: 5px;
}
.content {
display: inline-block;
vertical-align: top;
}
.title, .sub-title {
margin: 0;
padding: 3px 10px 3px 0;
}
.title {
font-size: 17px;
font-weight: bold;
}
.sub-title {
font-weight: bold;
color: #3F3F3F;
}
.img {
background: url(http://placehold.it/100/25);
width: 100px;
height: 25px;
border: 5px solid #EBEAAE;
}
<div id="main-container">
<div class="container">
<div class="box">
</div>
<div class="content">
<p class="title">Title</p>
<p class="sub-title">Sub-Title</p>
<div class="img"></div>
</div>
</div>
<div class="container">
<div class="box">
</div>
<div class="content">
<p class="title">Title</p>
<p class="sub-title">Sub-Title</p>
<div class="img"></div>
</div>
</div>
</div>
Maybe another option is to put the attribute in a parent div instead of the element
html:
<div id="wrapper">
<div class="twoColumn">
<img src="https://pbs.twimg.com/profile_images/444650714287972352/OXTvMFPl.png" />
</div>
<div class="twoColumn">
<p> this is a testingalot test</p>
<button> mybutton </button>
</div>
</div
css:
#wrapper{
border: 1px solid black;
}
.twoColumn{
width: 49%;
float:left;
border: 1px solid red;
}
button{
width: 50px;
height: 40px;
background: red;
}
img{
max-width: 100%;
}
http://jsfiddle.net/Equero/df2wvcet/
I hope it's help
Most simple solution would be to change your markup structure by wrapping your spans in a div just the way you did with the image, then add .app_top div{display:inline-block} .app_top div span{display:block}
.top{
width: 95%;
position: fixed;
background-color: #f7f7f7;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 3%;
padding-right: 3%;
border-bottom: 1px solid #b2b2b2;
}
.search{
width: 100%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: none;
background-color: #e3e3e6;
}
.search::-moz-focus-inner {
border: 0;
padding: 0;
}
.items{
background-color: #ffffff;
width: 100%;
padding-top: 50px;
}
.app{
margin-left: 25px;
margin-right: 25px;
}
.app_top div{display:inline-block}
.app_top div span{display:block}
<div class="main">
<div class="top" >
<input type="text" class="search" />
</div>
<!-- Items -->
<div class="items" style="border: 1px solid black; padding-top: ">
<div class="app" style="border: 1px solid red;" >
<div class="app_top">
<div>
<img src="_img1.jpg" width="95"/>
</div>
<div>
<span class="app_txt" style="border: 1px solid aqua;"> text text - House text house! Las...</span>
<span class="ltd" style="border: 1px solid pink;"> textic-texttive ltd</span>
<span class="" style="border: 1px solid blue;"> </span>
</div>
</div>
<div class="app_bottom">
</div>
</div>
</div>
.content contains all text in right side. If you use overflow:hidden the height of div will stay normal.
img { float:left; }
.content { overflow:hidden; }
#All:
I want to create a responsive structure of two divs which in turn contain two divs each as shown in the fig below.
Once the same turns responsive the structure should appear like:
Please guide me in achieving the same.
you can try something like this
<body>
<div class="container">
<div class="big">
<div class="small"></div>
<div class="small"></div>
</div>
<div class="big">
<div class="small"></div>
<div class="small"></div>
</div>
</div>
and the style
.container{
width:600px;
margin: 0 auto;
}
.big{
width: 250px;
height: 250px;
border: 2px solid #000;
float: left;
margin: 20px;
}
.small{
width: 100px;
height: 100px;
float: left;
margin: 0 auto;
border: 2px solid red;
}
#media(max-width:597px)
{
.container{
width: 300px;
}
}
There are many ways of doing this. One of the simplest is to use display: inline-block. The content will then automatically wrap to fit the width of your browser. Try running this snippet, click "Full page", and resize your browser.
div {
display:inline-block;
border:3px solid black;
width:300px;
height:150px;
padding:4px;
margin: 0 0 10px;
}
div div {
border-color: red;
width:134px;
height:136px;
}
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
try this HTML
<div id="conatiner">
<div id="div1">
<div id="div11"></div>
<div id="div12"></div>
</div>
<div id="div2">
<div id="div21"></div>
<div id="div22"></div>
</div>
</div>
and the css is
#div1, #div2 {
width:45%;
min-width:200px;
margin:1%;
float:left;
border: 1px solid black;
}
#div11, #div12, #div21, #div22 {
display:inline-block;
width:45%;
min-width:50px; // this width should 1/4th of the min-width of div1 and div2
margin:1%;
height:100px;
border: 1px solid black;
}
here js fiddle http://jsfiddle.net/90knutoc/9/