I have the following html divs :
...
<body>
<div id="barChart_div" style="width: 600px; height: 250px;float:left; "></div>
<div id="stats_div" style="width: 350px; height: 250px; float:left;"></div>
<div id="lineChart_div" style="width: 600px; height: 250px; "></div>
<div id="cdfChart_div" style="width: 600px; height: 250px;"></div>
</body>
...
what I am trying to do is to display the first div ( contains a bar chart) and the second div(contains some text fro the chart) next to each other, then below them display the other two divs (contain other charts) one after the other vertically i.e. I want it to look like:
and what i get currently is :
cdfChart_div (div4) is getting displayed on top of lineChart_div(div3).
What CSS style do i need to use to fix this?
On the div that comes immediately after the floated stats_div:
style="clear:left;"
jsFiddle Demo
Full code:
...
<body>
<div id="barChart_div" style="width: 600px; height: 250px;float:left; "></div>
<div id="stats_div" style="width: 350px; height: 250px; float:left;"></div>
<div id="lineChart_div" style="clear:left; width: 600px; height: 250px; "></div>
<div id="cdfChart_div" style="width: 600px; height: 250px;"></div>
</body>
...
Since stats_div is floated, its contents are taken out of the normal flow. Thus, the contents of the next div that is part of the normal flow does not make space for the contents of stats_div. You have have to clear one side of the next div if you want its contents to come after the contents of the previous floated div. Often you'll see clear: both, which works on either edge of the normal flow div.
try
<body>
<div style="overflow:auto">
<div id="barChart_div" style="width: 600px; height: 250px;float:left; "></div>
<div id="stats_div" style="width: 350px; height: 250px; float:left;"></div>
</div>
<div id="lineChart_div" style="width: 600px; height: 250px; "></div>
<div id="cdfChart_div" style="width: 600px; height: 250px;"></div>
Take a look to my example here
HTML
<body>
<div id="barChart_div" style="width: 145px; height: 250px;">aa</div>
<div id="stats_div" style="width: 350px; height: 250px;">bb</div>
<div id="lineChart_div" style="width: 600px; height: 250px;">cc</div>
<div id="cdfChart_div" style="width: 600px; height: 250px;">dd</div>
</body>
CSS
#barChart_div, #stats_div { float:left; }
#lineChart_div { clear:left; }
Explaination
First of all remember that have an "in-line" CSS isn't a good practise. You have to prefer external CSS or internal (i.e. header) css.
However let's see that example: jsFiddle.
As you can see, if you don't specify differently all your divs will result in an "ideal column". That's because the normal flow of the "html parser" will put them in that position.
If you do this with span element, instead, you obtain all the element on the same "line" (if they can stand and don't overflow, obviously). You can see that here.
When you tell float:left you're "forcing" the div to be floated at the "right margin" of the previous element.
Now, due to the second element floated, the third element will act at the same way.
For act as "standard" you have to use clear:left that will restore the "normal" behaviour
If you can, change your source order so the stats_div comes first, then use float:right on just it.
<div id="stats_div" style="width: 350px; height: 250px; float:right; background-color:#0099CC; border:1px solid black">custom</div>
<div id="barChart_div" style="width: 600px; height: 250px;float:left; background-color:#0099CC; border:1px solid black">1</div>
<div id="lineChart_div" style="width: 600px; height: 250px; float:left;background-color:#0099CC; border:1px solid black">2</div>
<div id="cdfChart_div" style="width: 600px; height: 250px;float:left; background-color:#0099CC; border:1px solid black">3</div>
paste it to your html, effect will be visible
Related
When I write a content in my page it will go to right forever and it won't break line, what is the problem? I want the content to stick to the same width but it is okay to over flow on y axis. my code:
<div id="mainBody" style="width: 900px;
height: 750px;
float: right;
background-color: #E9E9E9;">
<div id="div1" style="height: 750px; overflow-y: auto; border:1px solid red; width: auto;">
<div id="div2" style="height:710px; padding: 20px; width: 900px; border:1px solid red;"> Content </div></div></div>
Thank you.
First, i think that the div1 and div2 is the problem, why dont you just do it with one element ?
So it will be like this :
<div id="mainBody" style="width: 900px;height: 750px;float: right; padding: 20px;background-color: #E9E9E9; border:1px solid red; overflow-x: hidden; overflow-y: auto">
Content
</div>
So, #mainBody will wrap it at fixed dimension, with 200px padding, 1px red border, and will overflow scroll vertically
If you want to make the content not float right or even left ,then you need a clear class which clear your float , so that the next time you enter something that will go below everything and not left or right .Here I am providing you the code below , do check out and share if your problem persists.
.clear{
clear:both;
}
The above code will clear both "float right and float left".
If you want to delete just the right float then you may use
.clear{
clear:right;
}
So now after creating the above class just use this in the html section :
Entire Code:
<html>
<head>
<stlye type="text/css">
.clear
{
clear:both;
}
</style>
<body>
<div id="mainBody" style="width: 900px;
height: 750px;
float: right;
background-color: #E9E9E9;">
<div class="clear"></div>
<div id="div1" style="height: 750px; overflow-y: auto; border:1px solid red; width: auto;">
<div id="div2" style="height:710px; padding: 20px; width: 900px; border:1px solid red;"> Content </div></div></div>
</body>
</head>
I am having some difficulty with some html code (I have never done html programming of any significance) where I am trying to do something fairly simple. Actually I broke it down to the simplest form for now. So I have three blocks on top of each other. The first block at the very top has three sub boxes within it horizontally. I fixed the height of this block at 250px since my text fits into it. However my second block (Center) overlaps with the Top div. How do I specify that the center div start after the Top div? I want it to display a few pixels below the Top div.
<div id="Report" style="height: auto">
<div id="Top" style="width:inherit; height:250px">
<div id="First" class="TopMostLeft" >
<span style="font-family:Calibri; font-size:small">Info</span>
<table style="width:100%" > ... </table>
<div id="Second" class="TopMostCenter">
<span style="font-family:Calibri; font-size:small">Info2</span>
<div id="Third" class="TopMostRight">
<div id="About" class="TopRightDiv">
<table style="width:100%">
</div>
<div id="Center" style="border:solid; border-width:2px; border-color:lightgray; padding:4px; margin:10px">
<div id="Bottom" style="border-width:2px;border-width:2px; border-color:lightgray; padding:4px; margin:10px">
</div>
Here's what you need. Create a stylesheet so we can style it much better.
Working Fiddle: https://jsfiddle.net/v9jgj7n3/
I created your layout. This is how I understand what you need.
HTML
<div id="Report">
<div id="Top">
<div id="First" class="TopMostLeft" ></div>
<div id="Second" class="TopMostCenter"></div>
<div id="Third" class="TopMostRight"></div>
</div>
<div id="Center"></div>
<div id="Bottom"></div>
</div>
CSS
#Top {
width: 100%;
display: flex;
height: 250px;
}
#Top #First {
width: 10%;
background: red;
}
#Top #Second {
width: 40%;
background: blue;
}
#Top #Third {
width: 50%;
background: yellow;
}
#Center {
height: 200px;
width: 100%;
background: gray;
}
#Bottom {
height: 80px;
width: 100%;
background: black;
}
Edit the width and height to your desired value. This is how it will work
Also, I notice that you didn't close the child element of Top. You must always close DIV, so the HTML code will run well. It breaks your code.
Hope it helps. Cheers! Good Morning from Philippines.
Here is 3 inline blocks. The first one is scalable and the right two blocks has fixed width.
In case we resize browser right to block should be visible anyway. #blockID should fit the page, at the same time image should be scalable if we resized window.
I'm trying to make image in first block scalable.
I found several ways to do that using JS, but JS is not suitable because of discreteness. Is there some tricks to do that using only css?
Here is my code (http://jsfiddle.net/t69f60s6/):
<div style="width: 100%; height: 300px; white-space: nowrap;" id="blockID">
<div style="max-width: 640;">
<div style="display: inline-block; height: 300px; max-width: 300px; width: 100%; background: #ffff00; position: relative; overflow: hidden;" id="pano">
<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" top:0; left:0; width:100%; min-width: 100%; max-width: 100%; position: absolute; "/>
</div>
<div style="display: inline-block; height: 300px; width: 640px; background: #000;">
</div>
<div style="display: inline-block; height: 300px; width: 60px; background: #ff7870;">
</div>
</div>
</div>
UPDATE 1:
I have changed the cursive text
UPDATE 2:
I can achieve this effect using table css. But table is not good.
http://jsfiddle.net/6ng62eb7/4/
Try giving the image only a max-width of 100%.
So change:
<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" top:0; left:0; width:100%; min-width: 100%; max-width: 100%; position: absolute; "/>
to:
<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style="max-width: 100%;"/>
Updated Fiddle
You need to give the image a max-width: 100% . This will scale the image in regards to it's container. Then you need to scale the container the image is in. For now you have set <div style="max-width: 300px; width: 100%;" id="pano"> for the parent div, so the img inside will only total to 300px at max.
You also have the overall container set to <div style="max-width: 640px;">, which means that all 3 of your elements together will never be bigger than 640 px.
This is why you only see your image scaling when you make the browser window smaller.
Bottom line is, you have to make the whole element (including its container responsive or this won't work) - you have to use % instead of px, em... when defining box size. This also means the other two elements you want to keep to the right have to be in % (and all 3 need to add up to 100%.)
Try to combine display-block and inline-block like here:
<div style="width: 100%; height: 300px; white-space: nowrap;">
<div style="width: 100%; min-width: 641px; ">
<div style="display: table-cell; width: 30%; height: 286px; background: #ffff00; max-width: 350px; vertical-align: top;" id="pano">
<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" max-width: 90%; margin: 5%; " />
</div>
<div style="display: table-cell; width: 70%; min-width: 641px;">
<div style="display: inline-block; width: 641px; height: 286px; background: #000;" id="content">
</div>
<div style="display: inline-block; width: 60px; height: 286px; background: #0044ff;" id="basket">
</div>
</div>
</div>
</div>
http://jsfiddle.net/rfh8dgqu/
I'm not sure about cross-browser compatible but it works in chrome
This question already has answers here:
Why is there an unexplainable gap between these inline-block div elements? [duplicate]
(6 answers)
Closed 8 years ago.
I want to partition a block into two separate smaller blocks. For that, I am using the following HTML:
<div style="width: 300px; height: 200px; background-color: red; ">
<div style="display: inline-block; width: 100px; height: 200px; background-color: lightblue;">
</div>
<div style="display: inline-block; width: 196px; height: 200px; background-color: green;">
</div>
</div>
Result:
Here's the first problem: As you can see, there is still some of the (red) background visible between the two boxes (grey & green). I don't know how to get rid of that space - both div elements already have a margin, border and padding of 0. When I increase the width of the green div element to 200px (as it should be), the element jumps out of its parent since it grew too large.
Is there any default padding, or a rule that browsers must add some space between simple elements? If so, how can I get rid of it?
The second issue arises when I add a input tag to the green div:
<div style="width: 300px; height: 200px; background-color: red; ">
<div style="display: inline-block; width: 100px; height: 200px; background-color: lightblue;">
</div>
<div style="display: inline-block; width: 196px; height: 200px; background-color: green;">
<input type='submit' value='Details'/> <!-- new -->
</div>
</div>
Now, for some reason, the green div is forced down again:
The input element (and the containing div by extension) is moved down to the bottom of the red div. I found out I can stop that by using position: absolute but I'm confused as to why it behaves like this at all. It seems like there's something more subtle going wrong, but I don't know what.
Thanks for your help.
Instead of display:inline-block use float
<div style="width: 300px; height: 200px; background-color: red; ">
<div style="float: left; width: 100px; height: 200px; background-color: lightblue;">
</div>
<div style="float: right; width: 200px; height: 200px; background-color: green;">
<input type='submit' value='Details'/> <!-- new -->
</div>
</div>
DEMO
<div style="width: 300px; height: 200px; background-color: red; ">
<div style="display: inline-block; width: 100px; height: 200px; background-color: lightblue;">
</div>
<div style="display: inline-block;position:fixed; width: 200px; height: 200px; background-color: green;">
<input type='submit' value='Details'/>
</div>
</div>
Demo: http://jsfiddle.net/hsakapandit/c6AUF/
I have the following code:
<HTML>
<head>
<style>div{border:dashed 1px silver}</style>
</head>
<BODY style="background: #fff;">
<div style="position: absolute; background: #0f0; width: 256px; height: 96px; overflow: scroll;">
<DIV style=" display: inline-block;position: relative;top: 64px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #f00;"></DIV>
<DIV style="float: left">First</DIV>
<div style="clear: both;"></div></DIV>
<DIV style=" display: inline-block;position: relative;top: 96px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #0f0;"></DIV>
<DIV style="float: left">Second</DIV><div style="clear: both;"></div></DIV>
</div>
</BODY>
</HTML>
The second div isn't positioned on the 32 x position unless I remove the display: inline-block property, which I need. Is there a way around this?
Edit: it seems to work if I remove display: inline-block, but then the scrollbars will appear horizontally (as the div takes some invisible space).
You should use the way position:absolute elements are displayed when inside position:relative.
In addition, to avoid the horizontal scroll bar, use overflow-y.
Working example: http://jsbin.com/uveni3
When using "inline-block" properties, you should always start your HTML opening tag in a DTD format. placing one there should resolve this.