CSS Float overflow - html

I have this sample html
<html>
<head>
<style type="text/css">
.div-menu
{
width:300px;
margin-left:20px;
margin-right:20px;
float:left;
border:thin solid;
min-height:600px;
height:auto;
}
.div-content
{
float:left;
min-width:700px;
width:auto;
border:thin solid;
min-height:600px;
height:auto;
padding-right:20px;
}
</style>
</head>
<body>
<div style="margin-top:50px;padding:10px;">
<div class="div-menu">
</div>
<div class="div-content">
<div id='main' style="width:2000px;background-color:lightblue;height:600px">
Hello world
</div>
</div>
</div>
</body>
</html>
when the div main have actual width that larger than page width , the div-contain is break down to the bottom of div-menu , i want to make that div keep by side of div-menu , and the window horizontal scrollbar will appear ,
how can i achieve
Appreciate any suggest
thank

Change this line
<div style="margin-top:50px;padding:10px;">
to
<div style="width:2364px; margin-top:50px;padding:10px;">
specify a width equal to the sum of the effective widths of div-menu and div-content
In this case the width should be 2364px
This is calculated by finding the sum of div_width + margin_widths + padding_widths + border_widths
(300+20+20+2)+(2000+20+2)=2364

You should maintain width and height of the parent DIV according to content inside it.
Check this CSS Box Model to maintain this.
If parent have width 600px then width or height of inner div's should be
Inner Div actual width/height + border width + padding <= 600
So Specify some width to your parent div as per your requirement( 1024px is standard width nowadays) as:
<div style="width:1024px; margin-top:50px;padding:10px;">
then read about the box model and maintain your inner Div width/height.
If there width is not defined then use css overflow and a simple tutorial available here.
for example your content div have not prediction about width/height then use overflow
div
{
overflow:scroll;
}
In CSS3, you can specify in which direction you want to manage:
check these
CSS OVERFLOW-X
example:
blockquote { width: 50px; height: 50px; overflow-x: scroll }
<blockquote style=”width: 50px; height: 50px; overflow-x: scroll”>some text</blockquote>
CSS OVERFLOW-Y

Related

Padding missing on one side of scrollable div

Take a look at my snippet.
The parent div has a scrollbar and a child div.
Why is the padding (5px) missing on the right side?
#moh
{
background:red;
overflow-x:auto;
width:100px;
padding:5px; // this padding should be on all 4 sides
}
#moh div
{
width:500px;
height:50px;
background:green;
}
<div id="moh">
<div></div>
</div>
To get the bounty I want to know the reason for the missing padding. Maybe there is a name for this phenomenon. Or may it be a browser bug?
It would be excellent to know the part in the CSS or HTML specification which is responsible for the missing padding. But this is not required to get the bounty (Because I know it's hard to find).
#moh
{
background:red;
overflow-x:auto;
width:100px;
padding:5px;
}
#moh div
{
/* width:500px; */
height:50px;
background:green;
}
<html>
<head>
</head>
<body>
<div id="moh">
<div></div>
</div>
</html>
The padding on the right hand side doesn't appear because, the total width of the parent div is 100px(width) + 10px(padding) while the width for the chid div is explicitly set to 500px.
Since the chid div is a block level element and width property greater than that of the parent, it will move past the parent element and hide the right border from the parent div.
Solutions
either remove the width attribute in the child div (so it will take full width of the parent)
or set the width of the parent to at least 500px which is the width of the child element
The reason for this can tell. It's hard to explain, but I'll try. Your" moh " div width value is 100px," moh " in the div width value is 500px. The order of items on Pages is normally left to right. If you do not apply overflow, you see the overflowing sections :
#moh {
background: red;
width: 100px;
padding: 5px; // this padding should be on all 4 sides
}
#moh div {
width: 500px;
height: 50px;
background: green;
}
<div id="moh">
<div></div>
</div>
As you can see, there's an overflow from left to right. when you give overflow, The Overflow will be hidden automatically. So where's the overflow ? (left ? right ? ) That's why it will try to hide everything from the overflow, that is, the part that goes out when it doesn't fit. The part he's trying to hide is in the padding, so that part doesn't show up.
I'm sorry if I said anything that would be misunderstood. Maybe I helped you understand a little bit.
It happens because #moh is 100px and the inner div is 500px. The solution is to set them both to 500px and wrap them with a 3rd div that is limited to 100px with overflow-x.
#wrapper {
overflow-x: auto;
width: 100px;
}
#moh {
background: red;
width: 500px;
padding: 5px; // this padding should be on all 4 sides
}
#moh div {
width: 500px;
height: 50px;
background: green;
}
<div id="wrapper">
<div id="moh">
<div></div>
</div>
</div>
#wrap
{
overflow-x:auto;
width:100px;
}
#inner
{
background:red;
padding: 15px;
width: 500px;
}
#inner div
{
width:500px;
height:100px;
background:green;
}
<div id="wrap">
<div id="inner">
<div></div>
</div>
</div>
one solution would be this:
I had to add some more HTML but hope it solves your problem
It's because of the html behavior of block element like DIV and css overflow property.
By default html elements flow from left to right.
Browsers by Default behavior is -
If parent DIV have any width property (or specific width
inherited) and no css overflow rule is defined, and if child DIV
have defined width which is more than the parent can accommodate,
then it will overflow and will grow beyond the right edge of parent.
To control how Parent Div will deal with overflowing, css overflow
property can be used. overflow:hidden will instruct browser to crop
the exceeding width div at the edge.
overflow-x:auto will instruct browser that, when child element
exceeded width beyond the edge then add scrollbar at x-axis.
So, in the example case above, the child div is having greater width than parent and it is exceeding of the parent. And parent div is having 'overflow-x:auto' rule defined, the scrollbar is appearing upto the edge of parent.
Since padding is inside the edge of the div, it does not considered.
If you want to have padding on all side of the parent div.
Treat the parent div as a grandparent by adding one more div inside a parent and moving child div in it.
On grandparent div you can add required padding and width.
3 On new parent set width:100% which will expand to fit in a grandparent and setting overflow-x:autorule will add scrollbar when the child div expand beyond the parent width.
So, the code will be something like -
#moh
{
background:red;
width:100px;
padding:5px; // this padding should be on all 4 sides
}
#moh div
{
width:500px;
height:50px;
background:green;
}
div{
box-sizing:border-box;
}
#moh div.moh-container{
width:100%;
overflow-x:auto;
}
<!-- Grand parent Div for padding and width -->
<div id="moh">
<!-- Parent Div width 100% to fit in grandparent and overflow rule -->
<div class='moh-container'>
<!-- child element with exceeding width -->
<div></div>
</div>
</div>
Fiddle -
https://jsfiddle.net/guruling/471ka569/13/

css height and overflow

i have a problem about height properties.
i am making a website and a want to make this : there is a div element which collapse others and this has a child div and when i resize the window height then the parent div get the window height . it is ok but child div not fixing so some child elements are is this not showing . those are stay down of child div ... plase help me ...
i want to see full patch of yellow area but when i resize the browser height some p tags stay down ... how can i fix it ? whatever browser height yellow patch must shown ... please help me ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*, *:before, *:after{
padding:0;
margin:0;
box-sizing: border-box;
}
html,body{
height:100%;
overflow-y: hidden;
}
.d{
}
.d1{
height:100%;
overflow:hidden;
position:relative;
}
.d2{
display:block;
position:relative;
background:yellow;
overflow-y: auto;
height:90%;
}
.d3{
height:90px;
background:blue;
}
</style>
</head>
<body>
<div class="d d1">
<div class="d3">
<p>dadsdsaasd</p>
<p>dadsdsaasd</p>
<p>dadsdsaasd</p>
<p>dadsdsaasd</p>
<p>dadsdsaasd</p>
</div>
<div class="d2">
<p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>sonososososo</p>
</div>
</div>
</body>
</html>
try using position:inherit for the child divs. Hope this works
You can use css calc.
Jsfiddle
.d2
{
height: calc( 100% - 90px);
}
Height in pixels and percentage together doesn't work great usually. Overflow:hidden hides the 90% div since its beyond the viewport size. Remove overflow:hidden for the parent div, body & html tag to view hidden contents. If there is any specific reason for overflow:hidden to top hierarchy. You can still achieve the same by mentioning percentage values for both child div
According to your code
.d2{height:87%}
.d3{height:13%}

3 divs positions across a webpage

I am in need of some help with some divs.
I currently have
<body>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</body>
and I am trying to make it so the following occurs.
Left div aligns against left side of the screen, while right aligns to the right. The main then would be 1000px wide and be in the middle of the page
| Left Div | Main div 1000px wide | Right div |
I have seen this done using tables but I'd rather use a div to create my layout.
the main div will have other divs inside it for contents so I will also need the left and right divs height being the same as the main div.
Anyone able to help?
Regards,
Mason
You can do table-like layouts using divs. Check out the table-* values for CSS display.
http://jsfiddle.net/MVSjr/
HTML
<div class="table">
<div>
<div id="left">test</div>
<div id="center">test</div>
<div id="right">test</div>
</div>
</div>
CSS
#left {
background:#F00
}
#center {
background:#0F0;
width: 300px;
}
#right {
background:#00F
}
.table {
display:table;
width:100%;
}
.table > * {
display:table-row;
}
.table > * > * {
height: 200px;
display:table-cell
}
If you want a constant distance between the left / right divs to the main one, you'll have to specify it. My advise is to specify a page width, say 1300 px, and then split div's measures as you need (e.g: 150px for the left div, 1000px for the middle, 150px for the right. And then center the wrapper div to the page.
.wrapper{
width: 1300px;
margin: auto;
}
.left{
width:150px;
}
.main{
width:1000px;
}
.right{
width:150px;
}
You might also want to consider making it responsive either by specifying width in % if your content allows it or by specifying break-points in media-queries, but it's just a thought...
You are looking for three column layout for your web page. Three column layout can be either fixed or fluid.
In Fixed layout all the three columns would have the fixed width and when you re-size your browser screen, they will display with horizontal scroll bar.
In Fluid layout all the three columns would have width in percentage of screen width. Here is an example of three column fluid layout.
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
and CSS
div{
display:inline-block;
height:500px;
}
.left,.right{
background:red;
width:15%;
}
.main{
background:green;
width:70%;
}
Js Fiddle Demo

Create table with div, 2 fixed columns with same height all the time

I'd like a table created with DIV, this table has 2 fixed columns (that it's ok) but the both columns must have all the time the same height.
The code can be find here : Code on Fiddle
The code :
<style type="text/css">
#container
{
position:relative;
width:100%;
margin:0 auto;
}
#header {
background-color:#5a7fa9;
}
#center {
overflow:hidden;
width:100%;
}
#left {
float:left;
width:200px;
background-color:Gray;
}
#content {
margin-left:200px;
background-color:#a9bbd1;
}
#footer {
background-color:#95adc9;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="center">
<div id="left">left</div>
<div id="content">content<br/><br/></div>
</div>
<div id="footer">footer</div>
</div>
ther is an example
http://jsfiddle.net/amkrtchyan/dLeWA/9/
Hi i would like to explain the answer given by Howdy_McGee ..
Add min-height: 100px to #center
Add height: 100% to #left
Add height: 100% to content
he explained the above change which is completely correct.
Seeing your code in jiddle you havent wrote height anywhere in your css style. Therefore all your containers will take height:auto as per the content into it.
you have a div with id='center' this div should have some min-height:100px; and both the inner container should have height:100% by this your elements inside the center div will take height of their parent.
I had preferred you to give the min-height:100px because incase you are putting in dynamic content inside your inner boxes height should increase automatically, therefore if you do not have any content into your div height will stick to 100px.
Hope my explanation makes sense because i am in a bit hurry to type.
You can use this dirty hack (only adding this css):
#center > div {
margin-bottom: -2000px;
padding-bottom: 2000px;
}
Also see your updated example.
=== UPDATE ===
I'll try to explain it:
The padding-bottom uses the background-color. It has to be a heigh value (the minimum different height between the lowest and heighest column). So each column in the center-div add the background-color at the bottom. The negative margin-bottom sets the height back to it's real height. (The entire content is also be visible, even if the minimum height isn't large enough.)

div with 100% height in dynamicly sized element

To describe my item- I have a div element which grows in size if more content is added- also the parent div grows in size as it should be.
Then I have 2 div elements one floated left and the other on the right. I set height to 100% but that don't work. How could I achieve such behavior?
http://109.91.124.194/nucleareducated_2/index.php
This is a typical problem that unfortunately does not have a simple solution. Do a quick Google search for equal height columns and you will see what I mean. Your code is not working because height:100% does not work unless the parent container has a specified height to calculate what 100% is. Without a specified height set, then height:100% defaults to height:auto and you end up with divs that do not expand to the size of the parent.
As you have probably guessed, it's pretty hard to set the height of the parent div because it changes. The answers include setting the height dynamically with Javascript, or more often than not, just faking it so that it appears that the columns expand to the size of the parent.
IMO the best way is to use the css table attribute if you only care about newer browsers, it does not work on IE7 or older.
#containerdiv {
display:table;
}
#childdivleft, #childdivcenter, #childdivright {
display: table-cell;
}
The next best is to use large values for padding and a corresping negative margin on the bottom of the child containers.
#leftdiv,#rightdiv {
padding-bottom: 32767px;
margin-bottom: -32767px;
}
You can also use -
jQuery - Columns of Equal Height with JQuery
several other solutions - CSS - Equal Height Columns?
let me know if this is what you are looking for: tested in chrome*
<html>
<head>
<style>
html, body {
height:100%;
}
</style>
</head>
<body>
<div style="clear: both; height:100%;">
<div class="pageShadow" style="background-color: blue; height: 100%; width: 47px; float: left;"></div>
<div class="pageShadow" style="background-color: blue; height: 100%; width: 52px; float: right;"></div>
<div class="pageShadow" style="background-color: green; margin-left: 47px; margin-right: 52px;"></div>
</div>
</body>
</html>
Maybe this is what you mean? You can add a div around the left and right div if you want an area with 100% height.
CSS:
* { margin:0; padding:0 }
#around { background:yellow; float:left }
#left { float:left; width:40%; background:red }
#right { float:right; width:60%; background:green }
#bottom { clear:both; background:blue }
HTML:
<div>
<div id="around">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="bottom"></div>
</div>