I've managed to position two divs next to each other by using the following code however my left div won't allow a height:100% and seems to be defaulting to auto, how can I set the height to 100% with my current setup?
css:
.left_div
{
width:30%;
height:100%;
padding:10px;
text-align:center;
float:left;
overflow:hidden;
}
.right_div
{
word-wrap:break-word;
float:left;
width:65%;
margin-left:15px;
overflow:hidden;
}
html:
<div class='panel-body thread-body'>
<div class='panel panel-default original-post-panel'>
<!-- dynamically generated content -->
<div class='panel-body'>
<div class='left_div'>
<!-- dynamically generated content -->
</div>
<div class='right_div'>
<!-- dynamically generated content -->
</div>
<div style="clear:both">
</div>
</div>
</div>
Height of the floating divs doesn't goes up to the parents.
Thus, the height of the parent div will be 0.
Thus, the height of your left div will be also 0 if its height is set to 100%.
Thus, the content of your left div will overflow, and it will be visible only because of this overflow.
The simplest solution for your problem would be if you would put an empty div with clear: both after all of them:
<div class="left_div">...</div>
<div class="right_div">...</div>
<div style="clear: both"> </div>
Effectively, it will be a similar effect as if you would start an empty "new-line" (despite there is no textual line rendering here).
Related
I'm new to HTML did some research in w3school but not clear about how put image on this three different position on this background image in one div. I marked the position I need to put the image. The div will cover entire page in webkit and moz based browser. Consider any width and height of div. How you fixed position with respect to your considered width and height. I can't put background image to entire html or body or etc. It have to in one div or section only.
<div id="page1" style={"background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div class="">
<!-- Content Goes Here -->
</div>
</div>
This is a very simple way to achieve that using relative CSS positioning.
You can use a background div, and inside of it place the divs you need.
*{
margin:0;
padding:0;
}
.background{
background:url('http://lorempixel.com/1000/1600/nature');
background-size:cover;
height:100vh;
width:100%;
}
.img1,
.img2,
.img3{
position:relative;
width:300px;
height:150px;
background:url('http://placehold.it/300x150');
}
.img1{
top:20px;
left:350px;
}
.img2{
top:150px;
left: 20px;
}
.img3{
top:350px;
left:150px;
}
<div class="background">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</div>
If you wish you can have a look at multiple images backgrounds, here: http://www.w3schools.com/css/css3_backgrounds.asp
i would set up the html like this:
<div id="navbar">
<div id="image1" style=""></div>
<div id="image2" style=""></div>
<div id="image3" style=""></div>
<div>
<p>Text in navbar</p>
</div>
</div>
For each id "imageX" you could set a background-image then. And with display: inline-block, width and position you can put them where you want.
There are multiple ways to achieve that.
You can set the position of your div to absolute and adjust it to the position you'd like it to be
#div1 {
position : absolute;
left : 100px;
top : 200px;
}
You can also set the position to relativeand have your div placed relatively to its normal position.
You can check this for more information on the position property;
You could insert DIV within DIV. And you could position DIV using the top and left style attributes.
<div id="page1" style="{background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div id="subpanel_1" style="top:20px; left:102px;>
<!-- Content Goes Here -->
</div>
<div id="subpanel_2" style="top:200px; left:50px;>
<!-- Content Goes Here -->
</div>
</div>
Of course, instead of writing the style definitions inline, better put them in a separate <style>…</style> block.
I would like to have two divs inside a container fit vertically to fill the parent container, without overflowing from the bottom.
<div class="modal-body">
<div class="parent-container">
<div class="div1" style="height:auto;width:100%;">
<span style="width:100%;">
<div class="td-div">Header Test 1</div>
<div class="td-div">Header Test 12</div>
<div class="td-div">Header Test 1 3</div>
<div class="td-div">Header Test 14</div>
<div class="td-div">Header Test 15</div>
</span>
</div>
<div class="div2" style="width:100%;overflow-y:auto;">
<div class="blue-row" style= "width:100%;">
<span style="width:100%;display:inline-block">
<div class="td-div">TEst1 testing seeing what happens when its long</div>
<div class="td-div">Test2</div>
<div class="td-div">Test 3 3</div>
<div class="td-div">Test 4</div>
<div class="td-div">T e s t 5</div>
</span>
</div>
<div class="blue-row" style="width:100%;">
<span style="width:100%;display:inline-block">
<div class="td-div">TEst1 testing seeing what happens when its long</div>
<div class="td-div">Test2</div>
<div class="td-div">Test 3 3</div>
<div class="td-div">Test 4</div>
<div class="td-div">T e s t 5</div>
</span>
</div>
</div>
</div>
</div>
The link below is the actual problem that I'm having , with a bit more CSS to make it easier to distinguish.
http://jsfiddle.net/8sdLe2pu/12/
The problem is that the div with class "div2" is overflowing out the bottom of the parent container. It should fill any space left in the container (the space that the header doesn't take up) and should have a scrollbar to be able to view the rest of the contents.
I would like it to look like this example below, except it should vertically fill it's container, and should NOT use a hard-coded percent on the div with class "div2".
http://jsfiddle.net/8sdLe2pu/10/
It should look similar to this above, except there should be NO red space below the div with the scrollbar (div2). It should automatically fill the parent container without overflowing.
So, my question is, would it be possible to make a child div have a scrollbar like in the JSFiddle example number 10, while at the same time having it fill the parent without overflowing, and without using a hard-coded % height.
I do not want to use a hard-coded % height, because it should be able to always fill the parent container regardless of screen size, and the parent container uses vh for it's height.
Here is my solution using flexbox.
*{
box-sizing:border-box;
}
.modal-body{
height:65vh;
background:red;
}
.parent-container{
width:100%; height:100%;
display:flex;
align-items:stretch;
flex-direction:column;
}
.div1{
background:green;
}
.div2{
flex:1;
background:blue;
}
.div1 span{
display:table;
}
.div1 span div{
display:table-cell;
width:20%;
padding:1em;
vertical-align:middle;
}
div.blue-row span{
display:table;
width:100%;
}
div.blue-row span div{
display:table-cell;
width:20%;
padding:1em;
vertical-align:middle;
}
And working demo can be found here http://jsfiddle.net/pulamc/x8xw2hLg/
I used a bit of javascript to pull the height of your containing div out of the DOM and apply it to the .div2 class. also instead of a % height on div1 I used its current pixel height which is 75px.
basically subtract 75px ( or whatever height you end up with for the portion above your table ) from the total height of the containing div and put that in as the css height of the .div2
With this method the height will be calculated each time the page loads so it should always fit within the element instead of being hardcoded.
::Fiddle::
https://jsfiddle.net/8sdLe2pu/38/
::Code::
::JS:: --> used jQuery
var $modalBody = $( '.modal-body' ),
modalHeight = $modalBody.height(),
$div2 = $( '.div2' ),
div2Height = $div2.css( 'height' );
$div2.css({
height: modalHeight - 75
});
$( window ).resize(function(){
if ( div2Height !== modalHeight - 75 ){
$div2.css({
height: modalHeight - 75
});
}
});
::CSS::
.modal-body {
height:65vh;
background: red;
}
.td-div {
width:19%;
display:inline-block;
}
.div2 {
}
::HTML:: --> only made this one adjustment
<div class="div1" style="height:75px;width:100%;">
I want to create html page the next vision. Location of divs 1,2 and 3 in one line was done, but with 4th div I have some troubles and can't make it.
You really should post your code to see whats wrong with it.. But i made the example for you.
Here you go, you could use float.
Html Code:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css Code:
#wrapper{width:300px; margin:0;}
#first { height:300px; width:100px; background:black; float:left;}
#second{ height:250px; width:100px; background:red;float:left;}
#third{ height:250px; width:100px; background:green;float:left;}
#fourth{ height:50px; width:200px; background:blue;float:left;}
Working DEMO
Here's an example that uses non-fixed heights and widths. The key is wrapping the subsections in divs as well and styling accordingly. div is short for division after all.
<div class="left">
1
</div>
<div class="right">
<div class="second-third-wrapper">
<div class="second">
2
</div>
<div class="third">
3
</div>
</div>
<div class="fourth">
4
</div>
</div>
http://jsfiddle.net/Pb5NX/2/
The divs then use percentage height and widths to size them properly. These percentages take up a percentage of the parent element (the <body>, which then inherits from the <html>), so the parents height needs to be set as well.
body, html {
width: 100%;
height: 100%;
}
.left {
background-color: blue;
width: 50%;
height: 100%;
float: left;
}
If you want them a fixed size, you can just set a specific height and width style on the specific elements and the percentages will do the rest.
Here's a js fiddle of what I currently have, I am trying to make it so the boxes all fit within one line and there's a scrollbar that let's people scroll horizontally rather than having the boxes do what they're doing now.
Also, if anyone could get the class panel-body to fill 100% to the height of the page, that'd be awesome ;D
This is using Bootstrap 3.0.2, so the panels are pulled from that.
http://jsfiddle.net/Y55af/
Sample css:
.mainContent{
padding:20px;
}
.workplace_outter{
width:100%;
overflow-x:scroll;
}
.workplace_inner{
width:2000px;
}
.workplace_outter .panel{
width:300px;
margin-right:5px;
display:inline-block;
}
Sample HTML:
<div class="mainContent">
<div class="workplace_outter">
<div class="workplace_inner">
<div class="panel panel-default">
<div class="panel-heading">
Item
</div>
<div class="panel-body">
Item Body....
</div>
</div>
</div>
</div>
</div>
I don't quite understand what you mean by "get the white portion of the boxes to fill vertically", but since the panels are already inline-block elements, you can replace the width specification on their container with white-space: nowrap which will prevent any inline or inline-block elements from wrapping onto a second line.
Here's an updated fiddle, and the relevant code changed:
.workplace_inner{
/* width:2000px; (don't need anymore) */
white-space: nowrap;
}
I Want to place a div over another div without using height in pixels.I have used this code
<div style="position: relative;height:78px;">
<div style="width:425px;position: absolute;top: 0;left: 0;">
Content for First div
</div>
<div style="z-index:10;position:absolute;top: 0;left: 0;">
Content for Second div
</div>
</div>
The first div content will change dynamically . So is their any way to put height auto some thing like in parent div
both child divs are taken out of the flow, so the parent will have no natural height (which normally is "stretched" by it's children).
since you have pre-loaded data on the first child div, make the second match to it.
HTML:
<div id="parent">
<div id="firstChild">
Content for First div
</div>
<div id="secondChild">
Content for Second div
</div>
</div>
CSS:
#parent{
position:relative;
}
#firstChild{
width:425px;
}
#secondChild{
width:425px;
position:absolute;
top:0;
bottom:0;
}
NOTE: watch out for collisions in your styles, i used ID here. replace accordingly
height: 100% should make it the height of the parent div which is 78px;