I have a bodyMain div of 100% width. Inside it is a body div 800px with auto margin(can I use 'body' as id ?). Inside this are two divs bodyLeft and bodyRight 200px and 600px wide respectively. When I add content to inner divs neither bodyMain nor body expands in height . All heights are auto.
Here is the code: http://jsfiddle.net/TqxHq/18/
HTML:
<body>
<div id="bodyMain">
<div id="body">
<div id="bodyLeft"> left text goes here<br />
</div>
<div id="bodyRight">Right text goes here
</div>
</div>
</div>
</body>
CSS:
#bodyMain{
border:1px solid red;
width:100%;
height:auto;
}
#body{
border:1px solid green;
width:804px;
height:auto;
margin:auto;
}
#bodyLeft{
border:1px solid blue;
float:left;
width:200PX;
height:auto;
}
#bodyRight{
border:1px solid orange;
float:right;
width:600PX;
height:auto;
}
You must add
<div style="clear:both;"></div>
at the end of floating div to fix this issue. see
here
Problem happens when a floated element is within a container box and element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it:
clear:both
clearfix
This is a common issue when working with floats. There are a couple of common solutions:
Add a div after the floats with clear: both
Add the two floats into a container with the CSS attribute overflow: auto
Make the parent element a float
Using the :after CSS pseudo element with the CSS: .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
Adding a set height to the parent element
See this article
The simple solution is to have outer div overflow:hidden (in style attribute).
Thank you
jsFiddle demo
*{
margin:0;
padding:0;
}
#bodyMain{
position:relative;
overflow:hidden; /*added*/
border:1px solid red;
/*removed height:auto;*/
/*removed width:100%;*/
}
#body{
display:table;/*added*/
border:1px solid green;
width:804px;
margin: 0 auto; /*improved*/
}
#bodyLeft{
border:1px solid blue;
float:left;
width:200px;
/*removed height:auto;*/
}
#bodyRight{
border:1px solid orange;
float:right;
width:600px;
/*removed height:auto;*/
}
To avoid confusion with predefined tag names, refrain from using body, html, or head as ID attribute values.
I agree with Muhammed Irfan's idea. I don't agree with his method though. Avoid inline styling except for small snippets. Especially in this case, because it is likely that there will be another case where clear: both is necessary. So, add a div, give it a meaningful class name and apply the additional CSS.
See this fiddle for an example.
Related
Hi below is my css & html,i'm trying to align two div in a webpage with full height(100%) but is not working
.left_menu
{
height:100% !important;
width:30%;
border:1px solid grey;
float:left;
}
.right_menu
{
height:100% !important;
width:70%;
border:1px solid grey;
float:right;
}
and this is my html
<div class="left_menu">
</div>
<div class="right_menu">
</div>
this code is not taking full height,please help
set html,body min-height to 100%
Child occupies the height of parent so 100% height of parent will give 100% height to child
Considering that you div is direct child of html,body(if not then you need to maintain the height ratio with its parent)
html,body{
height:100%;
min-height:100%;
}
Just add display: inline-block; and it should solve the problem (did for me)
You set the height of the div to 100% but 100% of what? It's always 100% of the parent element but what is the parent element of the div set to? My bet is you don't have it set to anything and the browser has no way of calculating what 100% of nothing is.
I think that problem is in your border properties as they are adding extra space. So, I am not sure if this fit best your needs, but I would do something like this:
.left_menu
{
height:100% !important;
width:29%;
border:1px solid grey;
float:left;
}
.right_menu
{
height:100% !important;
width:69%;
border:1px solid grey;
float:left;
}
EDIT:
This might be better solution, because previous one will work different for devices with different width(for small device right_menu goes under left_menu). Here I just specify width for left_menu.
.left_menu
{
height:100% !important;
width:30%;
border:1px solid grey;
float:left;
}
.right_menu
{
height:100% !important;
border:1px solid grey;
}
In the following code, the #wrapper div contains the #left and the #right div. But they do not turn out to be contained inside the #wrapper div.
I want them to be treated as the content of the #wrapper div, so they are contained inside it, leaving the 10px padding applied to the #wrapper. Why are they displaced?
JSFiddle here.
<div id="wrapper">
<div id="left">Alpha</div>
<div id="right">Bravo</div>
</div>
The CSS is as follows.
#wrapper {
background-color:grey;
border-top: 1px solid black;
border-botton: 1px solid black;
padding:10px;
}
#left {
background-color:yellow;
float:left;
}
#right {
background-color:pink;
float:right;
}
I want to solve this without manipulating position attributes of the #wrapper as that might disrupt the normal structure of my page (I'm afraid so).
Because you are floating them so they sit outside of the DOM flow. If you want the parent to consider them, add overflow: hidden to the parent CSS or add a div at the bottom of the container with the rule clear: both;
Demo : http://jsfiddle.net/cros1mrv/1/
You should set the overflow of your wrapper to overflow: auto to flow around your floating divs.
#wrapper {
background-color: grey;
border-top: 1px solid black;
border-botton: 1px solid black;
padding: 10px;
overflow: auto;
}
See this fiddle.
Because of floating. One way to clear that is to use:
#wrapper {
overflow: hidden;
}
I've been trying this for a while and I don't seem to find a solution.
HTML:
<table>
<tr>
<td>
<div>this div has to expand over the td padding</div>
</td>
</tr>
</table>
CSS:
table {
height:100%;
}
td {
height:100%;
background: green;
padding:5px;
}
div {
min-width:100%;
height:100%;
background:yellow;
float:left;
white-space:nowrap;
}
I want the div to expand exactly as much as the td but to also expand over the td padding.
Moving the padding to the div element is not a solution since the div has to be 100% height and at least 100% width, the rest of the div's width is overflow:hidden and appears on hover but I try to keep the example as simple as possible so I didn't include that here.
Edit:
#codehorse I've tried your approach but now it appears that the div expands on the whole body so I guess Era is right, relative positioning might not work on td. I could use another wrapper between the td and div but I would like to avoid that if possible. I'm looking for a standard solution on this.
#Era Works perfect Thank you!
Although this is not the right way to do this but if it works for you then use this CSS for div:
div {
margin: -5px;
padding: 5px;
position: relative;
}
div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
td {
position: relative;
}
If your table structure is not too complex,i'll suggest you use display:table to achieve your purpose.....this way, you'll avoid position attributes, which otherwise conflict with layout sometimes making a big mess of things.
Also, html table is not suggested these days, since you have css tables!!
here is a demo
HTML
<div class="table">
<div class="td">
<div class="inner">this div has to expand over the td padding</div>
</div>
</div>
CSS
.table {
height:100%;
display:table;
}
.td {
height:100%;
background: green;
padding:5px;
display:table-cell;
}
div.inner {
min-width:100%;
margin:-2px; /* change this to suit your need */
background:yellow;
float:left;
white-space:nowrap;
}
I am working on a site where a 3rd party in-line HTML editor is being used (CKEditor). I have the editor control wrapped in a DIV that is relatively positioned and has a z-index that places is at the top of the visible stack. The problem is that on some pages there are images that are floating (float: right) on the right side. Some of the CKEditor styles are setting elements overflow property to hidden (overflow: hidden).
So although my containing DIV has a larger z-index than the floating image the CKEditor elements are not overflowing on top of the image. This creates the a result that looks as if the top right corner of the editor has been cut out.
Is there a way I can work around this without trying to edit CKEditor styles? Check out this example sinario:
http://jsfiddle.net/nmartin867/StHJA/
HTML
<body>
<div class="floating">
I'm floating!
</div>
<div class="container">
<div class="inner">
Why am I not overlapping?
</div>
</div>
CSS:
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:visible;*/ <--This would work
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
float:right;
}
You could do this but I am not sure if it applies to your situation.
.inner{
background-color:yellow;
position: absolute;
width:100%;
text-align: right;
}
Alternatively when you want to override third party styles but do not wish to edit them in the third party application you can recreate the same css class in your own stylesheet and force it to overwrite the third parties by using important! eg:
float: none !important;
Have you tried absolute positioning instead? Because you are floating a DIV that is not in the same container you want to overlap, it will position outside in the body itself. Also, you did not set the z-index for the floated DIV, so it will be layered behind because it is ahead of the other container in sequential order.
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:hidden;*/
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
/* float:right;*/
position:absolute;
top:0px;
right:0px;
z-index:2;
}
I am not sure if this is the effect you want to accomplish, but this will position the first container on the top.
This is how i configured the divs in HTML
<div id="wrapper"><div id="content"><div id="details-middle" class="box">
..........content.........
</div></div></div>
And this the css for the div's
#wrapper {
border-radius: 12px;
font-size:13px;
line-height:140%;
width:1008px;
margin:0 auto;
margin-top: 15px;
margin-bottom:15px;
}
#content {
margin-left:20px;
width:1008px;
}
#details-middle
{
float:left;
width:700px;
}
.box {border: 1px solid #CCC;
border-radius:12px;
margin-bottom:7px;
padding:10px 12px;
background-color: #FFF;
}
Everything is showing out of the div's ..
You are floating details-middle, which means non floated elements will not make room for it, unless they themselves are floated, or you clear the float.
My preferred solution is to give the parent overflow: hidden; which will force the parent to make room for its floated children:
#content
{
margin-left:20px;
width:1008px;
overflow: hidden; /* change here */
}
Not exactly sure what you're wanting, there isn't a lot of description in regards to your question, but you need:
$('#details-middle').text();
to gather just the text from that DIV.
If you're not wanting to display children elements of the DIV, then refer to this answer I gave recently - it might be your scenario too:
jQuery pull out text inside div but not in p tag