I have built a content div with three further divs who have the
display:inline-block;
attribute. One of them contains another div element which has some audio controlls. The right div has a really big margin! Chrome and Firefox don't show any margins or paddings. If I delete the #music element, everything is okay.
Here is a live demo
Thanks for helping
Because you are using the display: inline-block; definition, your content is verticaly aligned to baseline by default.
Apply this on your .frames class:
vertical-align: top;
Problem solved. ;)
if you add float:left to #music it gets fixed _
as suggested using clearfix on parent element doesn't hurt:
.parent:after{
display:table;
content: "",
clear:both
}
Related
I have an element that is absolutely positioned at the bottom of its box, and then the box itself is part of a series that are all fixed at the height of the tallest box. I am blanking on how to get some whitespace above the absolutely positioned element? JSFiddle here ... the "Do this" button in the tallest box needs some space above it and below the list.
I am trying to insert a line feed and set the white-space but this doesn't work.
.myelement:before {
content: "\00000a";
white-space: pre;
}
Thanks in advance!
You could add a bottom margin to your last li element since they are determining the height.
Add this css:
.providers li:last-child{
margin-bottom:30px;
}
of course that margin could be whatever you need.
Fiddle
Simplest way – add a padding-bottom to your items:
.ListCtr {
padding-bottom:30px;
}
http://jsfiddle.net/zh2os8yt/4/
Since your buttons contain only a small amount of text, this will work unless the screen width gets “really small”. If that’s an issue, you might want to use a bigger padding value for narrow screens using a media query.
But flexbox would be an even better tool to solve this.
Try adding padding-bottom to your boxes. For example you can edit the .ListCtr to the following:
.ListCtr {
position: relative;
padding-bottom:80px;
}
I have 3 elements inline block with each other. The 2 smaller grids are flush with the bottom of the larger chart by default. How can I get them to be flush with the top of the larger chart instead. http://i.imgur.com/TAUG2rZ.png
I would prefer to not have to give an absolute position to each element, unless thats the only way.
all thats applied atm:
#smallgrid1, #largechart, #smallgrid2{
display: inline-block;}
Add vertical-align:top to css if you want to align them to top.
Other options for vertical-align which you may want are: middle, baseline, bottom etc.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#smallgrid1, #largechart, #smallgrid2{
display: inline-block;
vertical-align: top; }
If, by default, the elements don't end up aligning themselves towards the top, I would use the vertical-align property to position each of the inline-block elements to the top.
I've created a simple CodePen that demonstrates this more clearly. Notice how I style each of the div elements on the page:
div.element {
display: inline-block;
vertical-align: top; /* aligns each of the divs to the top of the container */
}
In this case, the element ids are arbitrarily named element1, element2, and element3, but you would probably name them smallgrid1, largechart, and smallgrid2 respectively.
Hi there you could try this
#smallgrid1, #largechart, #smallgrid2{
display: inline-block; vertical-align: top}
Im trying to do some horizontal layout of divs but get an unwanted "margin" after the divs.
http://jsfiddle.net/Yzxpu/
When I change the the markup and delete the spaces or line breaks the problem gets fixed for the horizontal spacing, but still there is vertical spacing under the divs. And the markup looks bad.
http://jsfiddle.net/Yzxpu/1/
I don't want to see any red (except for the far right, it will get fixed as the right-margin % gets set)
I'm using latest Chrome as web browser.
By adding: margin:0; and padding:0; to the CSS it fixes the vertical issue, because browers add their own default settings you would be advised to use a reset.css sheet to set everything back to 0.
The fiddle with the fix: http://jsfiddle.net/ynemx/
Reset CSS: http://meyerweb.com/eric/tools/css/reset/
TRY THIS
http://jsfiddle.net/Yzxpu/10/
CHANGE YOUR CSS
#t-newsAndInfo{background-color:red; overflow:hidden}
#t-newsAndInfo div {float:left;}
REMOVE "DISPLAY" FROM #t-newsAndInfo div
You could try to float:left the inner divs:
http://jsfiddle.net/Yzxpu/15/
#t-newsAndInfo{background-color:red; overflow:hidden;}
#t-newsAndInfo div {
background-color:lightyellow;
display: inline-block;
float:left;
position: relative;
width: 31.11111111111111%;/*((900-(30+30))/3)/900*/
height: 100px;
text-align: center;
/*margin-right: 3.111111111%;*/
/*margin-right: 2.99999999999%;*/
}
I have the following problem. Somehow, the margin-bottom of .item (should be 15px) doesn't work for the last item in .box. See the jsfiddle: http://jsfiddle.net/WVP3D/
It might be a basic question, but i've been looking for a solution and couldn't find it. If anyone has the time to help me out, your help is really appreciated.
It is working. There's a space between the grey item divs, that's the bottom margin.
You can add bottom padding to the box div if you want the lighter grey below the items. Even just 1px padding works (FIDDLE HERE) Because then, when padding is added to the box div which must occur after the clear div it forces the margin on the item div to be seen by the parent (box).
Try adding padding-bottom:15px; to .item
Add display: table; to your .box class
.box {
...
display: table;
...
}
Check this fiddle: http://jsfiddle.net/GnHuJ/1/
Floating the container element (.box) should give you what you want, as can be seen on this jsfiddle
Two divs are next to eachother, both floating left within a wrapper. In IE and firefox they appear correctly, but in Chrome, the 2nd floating div clears down below Div A. When I remove "float:left" in the css, it goes to the correct position in Chrome, but clears down in IE and firefox (as it should). I dont know why it is appearing this way in Chrome. Any ideas?
The HTML and CSS would be useful to answer this.
If you have just two divs and you want them to float next to one another, then set a width on each of them and float one left and float the other right. Remember to leave some space in between the two.
in my case i use display:inline-table for the parent element of the floated elements.. Even if it is not a table.
I used the display:inline-table in order to fix the bug that google chrome had encountered..
I've same issue in Chrome and I solve it by giving display:inline-table to parent div
The solution is simple - just add the div which contains all these divs an attribute: display: table; - it should solve the problem.
I had multiple css float left divs with text links inside and the container was over lapping on the right of each. The fix was to remove space in the link display text. eg. ...> TEXT </a> to ...>TEXT</a>
You must give 1 div the height
For example
Div 1
.oneColFixCtrHdr #mainContent {
background: #FFFFFF;
width: 375px;
height: 0px; /* deze hoogte op 0 instellen, die bepaal je met de onderstaande div. */
position: relative;
display: block;
float: left;
padding-left: 10px;
margin-bottom: 20px;
padding-bottom: 0px;
padding-top: 20px;
}
Div 2
.oneColFixCtrHdr #maincontent2 {
background: #FFFFFF;
width: 390px;
height: auto;
position: relative;
display: inline-block;
float: right;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 5px;
padding-bottom: 0px;
padding-top: 20px;
padding-left: 20px;
border-left-style: groove;
In Chrome - Seems this issue has something to do with display attribute of parent element. I had same issue and did lot of search. Finally i got it fixed by removing display CSS attribute of parent TD tag. I also obsorved one wiered thing. When i had display:block; for parent a TD table element, in Chrome, colspan was not working (in IE it was working fine). I scratched my lots of hairs finding this problem.
I faced the same problem with Div and its Children Span both had float right, to solve i just added display inline to the Div parent and now it works fine in Chrome and Safari both.
I wrapped everything in <div style="display:inline;"> ... code .. </div> and solved the problem.
Without a code example this really is just guessing
I am not sure how Chrome works but I do know IE ads its own styles. Did you use a css reset? most cross browser issues can be fixed by this.
Sounds like the combined width of the 2 floating divs exceeds the width of the wrapper. Try setting the wrapper width to 100% or no width... or reducing the width of the two floating divs.
do you have any display: inline, block etc style properties set on any of those divs?
What about setting display:inline-block and the width for both divs?
EDIT: Setting a max-width of %50 for each one would work in all browsers except IE6, assuming there's no padding/margin set.
I've faced with the same problem. Chrome incorrectly displays divs with float. The block is displayed under the first. Not aside how I expected.
Solition is simple! Surround both blocks with div that no any other sisterly blocks inside.
I had a problem where I had a container div with a bunch of inner divs that had the float:left property set. My last inner div (most right) also wrapped down.
I fixed my problem by making sure that the combined inner divs with margins does not exceed the width of the container div.
Chrome's developer tool similar to firebug was great in helping me fix the problem.
For my container div I did not explicitly set a width but chrome's developer tool could show me the inherited width. I then looked at all the widths of the inner divs combined and then adjusted some of the inner div's width.
also similar issue with floating child div's. In my case .. I was floating a surrounding div to right, that contained h3 element (with text-align property) - followed by 2 child block elements.
Intent center h3 text, in relation to child block elements below it.
-
Problem? I did not have a set width for block child elements.. Why? I wanted the width to hold distinct padding on left / right relative to text amount in that container. eg. padding:10px 30px;
Solution I resorted to setting a width to surrounding and child divs, also center aligning text on child divs to give similar results of first case attempt.
I experienced the same problem. I had two divs with float: left inside a table td -- I had to set the table td style to include style="text-align: left;" for them to correctly align.
I'm no HTML hero so in my case the problem was really silly.
It was just a syntax error so be sure you check all your syntax before you start pulling your hair out like I did.
And SAFARI was completely ignoring it and displaying the divs correctly floated so I got really confused.
BASICALLY it was an unclosed div tag that was creating the problem :
<div class="seperator" </div> instead of <div class="seperator"> </div>