There is a strange issue in this simple html structure. Here is the html code
<body>
<div class='DatePicker' style="display: inline-block">
<div id="dayDiv" class='DayDiv BorderMe'>
<div id='upArrowDivs' class="BorderMe" style='display: inline-block; height:10%;width:100%;'>
<div class='UpArrowDiv BorderMe'>
</div>
<div class='UpArrowDiv BorderMe'>
</div>
</div>
</div>
</div>
</body>
Here the two innermost divs are displaying outside of its parent div which has id "upArrowDivs". Here is the JsFiddle link where you can see whats going on in StyleSheet.
Add this rule to .UpArrowDiv
vertical-align: top;
see the fiddle
Add this on your css file
#upArrowDivs{overflow:hidden;}
Here is the Solution.
Addition to CSS:
#upArrowDivs{overflow:auto;}
You need to add an overflow for the same.
Hope this helps.
Here are the options
1) Increase your height of "upArrowDivs"
2) Set Padding=0 for "upArrowDivs" and margin=0 to innermost divs
Related
I am trying to place three divs side by side and
fourth div in the next row. I used float:left and width:33%.
What else property I need to apply to achieve this?
https://jsfiddle.net/wdvpubau/
Edit: One more thing regarding the same css styles,
I made property display:inline within css .divinline , but there is no difference in rendering. I had learnt that display:block will occupy the entire row. Is it being overridden?
Another way is as below
<div>
<div style="float:left;width:100px">1</div>
<div style="float:left;width:100px">2</div>
<div style="float:left;width:100px">3</div>
<div style="float:left;width:100px">4</div>
</div>
As rightly suggested by #Imran, you need to remove the . before the css class names while you use them in html. Try:
.divinline{
display:block;
float:left;
width:33%;
}
.maindiv{
display:block;
}
<div class="maindiv">
<div class="divinline"> <!-- here the class is class="divline" and not .divline -->
HI
</div>
<div class="divinline">
HI
</div>
<div class="divinline">
HI
</div>
<div class="divinline">
HI
</div>
</div>
Fiddle here : https://jsfiddle.net/nithin_krishnan/r0Lyydg8/
I would expect that the following html document results in a red square vertically centered within a yellow square:
<html>
<body>
<div style="width:200px;height:200px;background-color:yellow">
<div style="width:100px;height:100px;background-color:red;vertical-align:middle">
</div>
</div>
</body>
</html>
But it results in one that is aligned to the top of its parent div.
fiddle
What am I doing wrong? Why isn't vertical-align:middle working?
The vertical-align property affects the vertical positioning inside a line box of the boxes generated by an inline-level element. Here are more details!
<div style="display: table-cell; width:200px;height:200px;background-color:yellow; vertical-align:middle">
<div style="width:100px;height:100px;background-color:red;">
</div>
</div>
jsFiddle here
I've got problem with paragraph on my website: naprawiamy.za.pl. As u can see there is a big white space in the text. What's that and how it got there? Could somebody tell me?
This happen because the above div contains img that have float:left. So there is need to clear the float. Add overflow:hidden for the div with img tags and will fix the text below.
Your code is written as:
<div id="main">
<div>
<img src="lol.png" id="logo" alt="logo serwisu">
//more images
</div>
<div id="story" >
Your Text
</div>
</div>
Set the CSS Property float:left for
1. <div style="float:left">
2. <div id="story" style="float:left">
<div style="background-color:black">
<div style="float:right">
Test message
</div>
<div>
This will show 'Test message' with white background because the parent div didn't fit the content.
How can make the div fit to the content? (without using table, or display:table since it's not supported in IE)
You can also do this:
<div style="background-color:black; overflow: auto;">
<div style="float:right">
Test message
</div>
<div>
It's a cleaner way to do the clearfix :)
A common solution is to put a <br style="clear: both;"> after the floating element to clear the float and cause the parent element to wrap the elements.
<div style="background-color:black">
<div style="float:right">
Test message
</div>
<br style="clear: both;">
<div>
Apart from the problem, I'd suggest to put the styles in a separate CSS file, if not realised yet.
Sounds like this is the old clearfix issue. This is almost a total necessity when using css and floats for layouts. See http://www.webtoolkit.info/css-clearfix.html for a brief description and fix. Or for a more in depth look, see here http://www.positioniseverything.net/easyclearing.html
<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
Why does the background color not show as black? I cannot set the width and float, is it possible without them?
Since the outer div only contains floated divs, it renders with 0 height. Either give it a height or set its overflow to hidden.
Change it to:
<div style="background-color:black; overflow:hidden;" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
Basically the outer div only contains floats. Floats are removed from the normal flow. As such the outer div really contains nothing and thus has no height. It really is black but you just can't see it.
The overflow:hidden property basically makes the outer div enclose the floats. The other way to do this is:
<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
<div style="clear:both></div>
</div>
Oh and just for completeness, you should really prefer classes to direct CSS styles.
Floats don't have a height so the containing div has a height of zero.
<div style="background-color:black; overflow:hidden;zoom:1" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
overflow:hidden clears the float for most browsers.
zoom:1 clears the float for IE.
This being a very old question but worth adding that I have just had a similar issue where a background colour on a footer element in my case didn't show. I added a position: relative which worked.