i have a problem in html and css. that's,check the div is in the below order
<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
</div>
.child1 { float:right; width:auto; }
.child2 { float:right; width:200px; }
in this the div child1 is a horizontal growing div. so its not possible to add specific width to the div. what i need to show the child1 and child2 div in same horizontal line. if child1 is empty the child2 will be the rightmost div. the above solution don't work in ie7. please help me to find a solution.
please check this image.
image 1: rendering in chrome
image 2: rendering in ie7
thanks in advance.
swap their order in the html.
Rigth floats are "inverted".
like this:
<div class="parent">
<div class="child2">
</div>
<div class="child1">
</div>
</div>
may be you have to define standard doctype like this <!DOCTYPE html> in your html page
Related
I've got a red box and a green one, side-by-side, and centered. When the browser width is smaller than the width of the squares, they break into separate lines. How do I keep them together?
(I tried using a container div with their combined widths, which does the job in keeping them together, but they no longer are centered.)
Any suggestions?
The code:
<body>
<div style='text-align:center;font-size:0'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
</body>
You can run it here: https://plnkr.co/edit/2De21ziNmaeleFmkPuPF?p=preview
This can be done in many ways, here is 3:
Use min-width
<div style='text-align:center;font-size:0; min-width: 400px'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Use white-space: nowrap
<div style='text-align:center;font-size:0; white-space: nowrap'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Use display: flex;
<div style='text-align:center;font-size:0;display: flex;justify-content: center'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Try using Flex-box
.parent{
display:flex;
border:1px solid green;
width:500px;
}
.parent div{
background:green;
width:100px;
height:100px;
margin:20px;
}
<div class="parent">
<div>cell1</div>
<div>cell2</div>
</div>
Hope this helps
If you give them a fixed width (ex 200+200px), when that div width is passed (ex mobile width of 375px < 400px of divs sum), the last element slide on the next row.
With width of 35% for each other, will look exactly as you want it for that 200px.
<body>
<div style='text-align:center;font-size:0; width: 100%;'>
<div style='display:inline-block;background-color:red; width:35%;height:50px'></div>
<div style='display:inline-block;background-color:green; width:35%;height:50px'></div>
</div>
</body>
Here is the link to your code
EDIT:
Here is a usefull link for understanding better the width options depends of the width of device, and I encourage you to take a deeply look inside of w3schools, or other platforms where you can learn better how to manipulate elements of html, with css and js.
screen-width
Try using width: 50% on the boxes instead of width: 200px.
I have a problem in my website
I have a big <div> with brown background and it has no height and have 3 <div> elements inside it, and that big <div> should not have absolute position.
I tried to fix that using float, but when I use float left/right that brown background is no longer visible!
Below is a simple code for understanding my problem :
<div id="bigDiv" style="background-color:brown">
<div id="right"></div>
<div id="midle"></div>
<div id="left"></div>
</div>
You do not need to float the elements, all you need to do is use display:inline-block;
As the float object basically means your box model loses it's height value as it no longer is relative to its parent. If you want to go the float method make sure you put a <br class="clr-b"> where .clr-b { clear:both; }
This might be causes of floating. You could resolve your problem by just applying overflow:hidden; styles to your big div.
Else, you could use clearfix method (clear: both;).
<div id="bigDiv" style="background-color:brown; overflow:hidden;">
<div id="right"></div>
<div id="midle"></div>
<div id="left"></div>
</div>
You can use floats:
http://jsfiddle.net/bKVuc/
#bigDiv {
width: 100%;
overflow: hidden;
}
#right, #midle, #left {
float: left;
width: 33.333%;
height: 100px;
}
Try this:
<div id="bigDiv" style="background-color:brown">
<div id="right"></div>
<div id="midle"></div>
<div id="left"></div>
<div style="clear:both;"></div>
</div>
You can top float by using style:
<div style="clear:both;"></div>
In case the big div is floated with height:auto, the element should be floated in order to stuff the big div. Or the big div acts as if there is nothing in it(height=0), so the background disappears.
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
Why isnt the background color showing up in between those 2 divs?
When you float elements you should provide the width of the floated elements. Otherwise you may encounter unexpected behaviors accross different browsers.
Check this tutorial, there is good info on floating in css. [link is dead]
Basically, if you provide an overflow:hidden; to the container div and provide width to the floated elements, your problem will be solved.
<div style="overflow: hidden;">
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
</div>
Similarly, you can add another div wherever you want to normalize the flow ike this:
<div>
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
<div style="clear:both;"></div>
<div>This div will be at the same place
as if the previous elements are not floated</div>
</div>
Both will work :)
EDIT
Another method which I use frequently in these days is to float the first element and set a margin-left to the following element. For instance:
<div>
<div style="float: left; width: 300px;">Some text</div>
<div style="margin-left: 300px;">Some text</div>
<div style="clear: both;"></div>
</div>
The advantage of this method is that the following element (the second div in this case) does not need a fixed width. Plus, you may skip the third div (clear: both;). It's optional. I just add it in case that the floated div is longer in height than the second div since if you don't add it the parent div will always get the height of the second div.
Just set the container div to overflow: hidden;.
If you set elements to float they won't be in the normal 'flow' of the document anymore.
div { background: #ccc; overflow: hidden; }
And you didn't even made a freehand circle ;)
A floating element doesn't affect the size of the parent, unless the parent specifically contain the children using the overflow style.
Your outer div has the same background colors as the child divs, but the height of the parent is zero, so you don't see its background.
It's because both the divs are floated so the containing divhas no height. If you were to add a third child div whic wasn't a float, give it a height of 0 and clear:both you should see the background colour appear.
The white space you are showing is a body part and you set the background color to the div but not in the body. That is the reason the body part is empty.
To color the empty part you should add following code:
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
body{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
You can change the body background color by changing the background color in body style.
I don't know how to summarize my situation, but here's the simplified code showing the problem (index.html) :
<html>
<body>
<div id="wrapper" class="divide">
<div id="top" class="divide">
....(all of its contents)....
</div>
<div id="content" class="divide">
<div id="left">
....(all the contents)....
</div>
<div id="right">
....(all the contents)....
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
(style.css)
.divide{
margin-left:auto;
margin-right:auto;
width:960px;
}
body {
background-color: #666600;
}
#left {
......
......
float: left;
}
#right {
......
......
float: left;
}
#wrapper{
background-color:#ffffff;
}
So here I want the "wrapper" div background to be white in color, and the body background surrounding it to have another color (in here I put the brownish color). This works for the "top" div, but not the "content" div (thus, all of its children). The "content" div has the same background color as body, which doesn't make sense to me because the "wrapper" div does contain "content" div.
In other word, the "wrapper" div seems doesn't reach the "content" div and all of its children. Is there any workaround for this problem? Inform me if you all need additional information. Thanks for any help!
NOTE: As our helpful people pointed out, the floating properties in the div element does cause the above problem. I did not realize that. That's why I didn't put the floating properties in the first place. So I just edited the above code so that we know what's really causing it. Peace!
Do you have any floated elements, such as #left and #right?
If so, you need to clear your floats.
One way to do that is to add overflow: hidden to #wrapper.
You should also fix a small mistake in your HTML: </left> to </div>.
If you float your content divs, you might be having a problem with not clearing the floats. Try adding overflow:auto to your wrapper div
I put your code into JSFiddle and got this: http://jsfiddle.net/XPLWR/, it looks fine to me.
EDIT: This happens only in IE8, it works fine in IE7, Firefox, Opera etc
First of all, here is a picture I have made in photoshop to demonstrate my problem: http://richardknop.com/pict.jpg
Now you should have idea about my issue. Here is a simplified version of markup I'm using (I left out most irrelevant content):
<div class="left">
<div class="box">
// box content
</div>
<div class="box">
// box content
</div>
<div class="box">
// box content
</div>
</div>
<div class="right">
<div class="box">
// box content
</div>
<div class="box">
// box content
</div>
<div class="box">
// box content
</div>
</div>
<div class="clear"></div>
<div class="box">
//
// NOW THIS BOX HAS NO TOP MARGIN
//
</div>
<div class="box">
// box content
</div>
And CSS styles go like this:
.clear {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
.box {
overflow: auto;
margin-top: 10px;
}
Obviously I have left out all irreevant styles like borders, background colors and images, font sizes etc. I have kept only important stuff.
Any idea where could be the problem?
See if padding-top: 10px works. It might be that the margin is trying to go from the top of the page.
I think this is an IE8 bug. Relates to a sibling element of a floated left and right div. With or without a clearing div, the final unfloated element loses its top margin in IE8.
We've tested this, and only IE8 gets it wrong:
http://www.inventpartners.com/content/ie8_margin_top_bug
We also came up with 3 solutions.
Try closing your clear div.
<div class="clear"></div>
I don't quite get this approach. You could wrap the <div>s with class right and left in another <div> and apply overflow: hidden, width: 100% to it so that the elements below floated elements will get displayed correctly.
enter code hereTry using a container with a width with overflow:hidden around the floated divs, and remove the cleared div.
<div id="container">
<div class="left">
<div class="box"> // box content </div>
<div class="box"> // box content </div>
<div class="box"> // box content </div>
</div>
<div class="right">
<div class="box"> // box content right </div>
<div class="box"> // box content </div>
<div class="box"> // box content </div>
</div>
</div>
<div class="box"> // // NOW THIS BOX HAS NO TOP MARGIN //</div>
<div class="box"> // box content</div>
And the CSS
#container { width: 100%; overflow: hidden; }
(sorry, I left IE7 on my work machine for testing so I can't verify)
I have similar problems, and the solutions provided by Matt Bradley did not work for me (but thanks for posting it anyway!). I wanted to have margin-top:10px on a h1 element.
The solution I came up with was by adding position:relative , top:10px and margin-top:0px to the h1 element.
I don't have IE8 with me... but did you try adding clear: both to the bottom div and adding a bottom margin to one of the top floats? I'm pretty sure that would achieve the same effect without any extra divs.