I have a problem with an horizontal white space that appears inside a div without any reason. I mean, I cant' figure out WHY it appears, it just doesn't make any sense.
Here's Fiddle
The layout should be two columns: one right and one left and the latter one is larger. The problem is that on the right div I see contents shown regularly, with all alignments well shown. On the left one, its contents are lower, I mean it seems like it has a padding-top of about 5px, but there's no padding at all. The white space is INSIDE the left table-cell div, because even with plain text inside it ("Lorem ipsum"), the text is shown lower than the contents inside the right div.
HTML code is:
<div id="main_contents_cage">
<div id="main_contents_left">
<table> ... some content ... </table>
</div>
<div id="main_contents_right">
... some other content ...
</div>
</div>
CSS is:
#main_contents_cage { display: table; }
#main_contents_left, #main_contents_right { display: table-cell; }
#main_contents_left { width: 742px; }
#main_contents_right { width: 246px; border-left: 1px solid #C6C6C6; }
I searched the internet and StackOv for anyone else with the same problem without finding anyone with the same issue. Similar, but not the same at all!
I tried giving border-collapse/border-spacing to all the elements (once each, then just the "table" one, then just the "table-cell" ones, then the three of them): nothing.
I tried changing the contents of the table-cell divs, without any different result (replacing the table with other divs, or just plain text....).
Anyone has any idea?
I experienced this same issue. I too was able to "fix" the issue by assigning "vertical-align: top" to the table-cell element. This only appears to be an issue in Chorme. For me, it was the right column only (rather the left like in your example)
Ok I figured out: I need to add "vertical-align: top" to the "table-cell" divs in order for the content to display with no white space on the top!
I know in the fiddles it works but I really can't make it work on my webpage, even with no CSS (just the one I need...). (FF 13, Chrome 20).
Thank you
The contents of the div with the class of "main_contents_left" have table tags that contain no children row or grandchildren cells, could that have something to do with it?
Here is a link to my jsFiddle, if you are interested
Related
I have a problem on my website: https://www.ars-neurochirurgica.com/ . I have several accordion menus which I made with pure css without any javascript and everything works perfect, except for one problem:
When I click on the categories to expand the tag, all other boxes which are collapsed with the detail tag which are on the same row will expand their border from the .div. Is there any way to fix this problem without using javascript? I tried to only draw the border if the details tag is open, however then I run into the problem that the border is smaller than the .div because it will be only assigned to the details tag. The best way would be to be able to select the parent element from the details[open] tag. However after doing some research that is not possible with css3 only. Anyone has ideas how to fix this problem? On mobile it works perfectly fine because only one row is displayed....
Here's a quick solution that just addresses the border issue you described:
Remove the border, padding-left, and padding-right from .compactblock.
Add the following CSS:
details {
padding-left: 10px;
padding-right: 10px;
}
details[open] {
border: 1px solid var(--darkblack);
height: 100%;
}
Basically, this forces the <details> element to expand to fill the full height, so that its border surrounds the entire content of the expanded accordion block. It also moves the padding from the <div> container to the <details> element itself so that the width of the border matches the summary region.
However, since this approach still uses the grid layout, you'll notice that elements still "jump" below "phantom" blocks when you expand a block in any row. To resolve this, I would highly recommend taking a look at using flexbox instead, per the recommendation in the comments.
In the CSS code below, it appears that the background of divTwo has moved behind divOne. But the content of divTwo appears to have been left behind - why does the background of the div appear to move independently of the content?
#divOne {
width: 300px;
height: 100px;
background-color: yellow;
margin:5px;
float:left
}
#divTwo {
width: 300px;
height: 100px;
padding:5px;
background-color: green;
}
<div id="divOne">Div01</div>
<div id="divTwo">Div02</div>
result in Chrome
The content of divTwo is not moving independently. The content is text, so it's rendered in a line box.
Now while unfloated, uncleared blocks ignore the presence of floated elements that precede them, the line boxes that they contain don't. The line boxes will avoid the floated element and go either alongside the floated element or, if there's no space for them there, underneath the floated element.
In your example, there is no space alongside, so the text has gone underneath the floated element. But since you've set a fixed height for divTwo, there's not enough space underneath and yet inside divTwo for the line box either. So the text content overflows divTwo, hence the text appears without divTwo's background behind it.
From Mozilla provided Float Documentation
How floats are positioned
As mentioned above, when an element is floated it is taken out of the
normal flow of the document. It is shifted to the left or right until
it touches the edge of its containing box or another floated element.
So I imagine when you declare float for divOne but not divTwo, then divTwo is following the normal flow of the document which is the same position as divOne.
You may also find Documentation for CSS Display useful.
If you do want these inline, but do not want to declare float for divTwo you can use:
#divOne {
width: 300px;
height: 100px;
background-color: yellow;
float:inline-start;
}
#divTwo {
width: 300px;
height: 100px;
padding:5px;
background-color: green;
}
This is something quite frequently met in just simple HTML. In you current code, you are not using any containers, wrappers or rows. This leads for the elements to overlap, if you want them not to overlap, you should give them some positioning or padding. In the provided fiddle, I have added a padding of 50 px for the divTwo in order to increase it's box show it is seen better.
The main idea is that you never start simply writing code but carefully think about the positioning of each element on your webpage. A good practice would be to learn how to "stack" elements( That's how I call it, the term might not be correct). Another thing is that there are some certain front end frameworks which could teach you better by example how to do this.
Bootstrap, Zurb Foundation (But Bootstrap...I'm not sure how many people use Zurb)
Here's the JS Fiddle to see how exactly the div has changed:JS Fiddle
Like #ZobmbieChowder said, the logic of CSS float property is that you have a huge box which contains two smaller boxes, and now you want one is located on the left and another on the right. If you don't have the huge box first, the complier doesn't get human's logic which one shall be the left or right. It only makes sense for machine that you "define" a container first, then talk about its element position left or right.
Alternative to #jpat827 answer would be to either set div two's clear property to left or add an empty div after div one and set it's clear property to left. What
The clear property, if there is no space left for the unfloated element, prevents the unfloated element from going under the floated element.
When you clear the div two to left, then what it really does is that it places div two below the floated element.
let's say, div one was floated to right, then you would have to clear div two to the right, in order to bring it below div one.
If, there were three divs, out of which two were floated to left and right, then the clear property for the third unfloated div must be set to both so that it can clear past elements floated in either direction.
I hope this was helpful.
Thank You
Recently I have been trying to get used to floating divs and aligning them to fit all on one line. However, I have a small problem. In one of the codes I was creating, I noticed I could not get this text to go down at all.
Here is my code:
https://jsfiddle.net/9sjyj0hy/
As you can see, the vs code is here:
<div class="fluidbox">vs.
and the end of the div is after all the other divs. The first way I tried to fix this was adding a line-height, well that only made things worse:
https://jsfiddle.net/9sjyj0hy/3/
As you can see, I edited the fluidbox to have a line-height of 100px, and the result made all divs drop down when I only need the VS text to do that. Any way to fix this?
Wrap your text "vs" inside an element and position that element.
<span class="vs">vs.</span>
.vs {
position : absolute;
margin-top : 40px;
}
I have made it work as you are saying. Have a look at the jsfiddle. The only thing you need to do is to wrap the vs in a span and add these css properties:
.fluidbox span {
position: absolute;
margin-top: 20px;
}
http://jsfiddle.net/inzamamtahir/dcgmtnua/
I'm a bit afraid of using floats as I didn't yet understand clearing the floats and all the hacks that are on the internet in regard to that activity so I've used display:inline-block to place two divs in inline fashion. Their container has a
width:auto;
max-width:900px;
and each of the divs has
display:inline-block;
width: 450px;
Now no matter what I do the second div always breaks to another line right below the first div.
Here's the code : http://codepen.io/anon/pen/xgtFd
I have already modified the width of the two divs like for example
width:440px;
but it didn't help. Still the second div is slightly 'off place'. That's weird cause I was making a website and using pretty much the same approach for my header like in this project. Please help me determine the problem.
I would be glad for any help.
The widths are too wide.
Bump the nav down to about 446px, and they come back in line.
Why 444px instead of 450px? Two reasons:
Your border is taking 2px.
There is whitespace between the <div> tags in your markup, which is reflected in the rendering. If you would like it to be able to make it 450px, put the closing div tag and the next opening div tag immediately adjacent, like so: </div><div id="nav">
If you want to be able to keep the border, and set the width to 450px, then you should check out box-sizing, and utilize box-sizing: border-box;.
Edit:
To address your vertical alignment issues, you need to apply vertical-align: top; to the div elements (the nav and logo divs).
And, the ul isn't centered because when you apply display:block to it, it fills the full width. So you could either make the contents of the div centered with text-align: center on the ul, or you could make the ul display: inline-block.
I have something similar to below:
<div style="float:left;margin-left:5px;">Test</div>
The issue is that I need to have this div repeat multiple times. If it repeats to many times, instead of forcing you to scroll right to see the rest of it (like I want it to), it instead goes down to the next line.
Example of the issue: http://jsfiddle.net/ruh7z/1/
Any help with this would be great, thanks
That behavior is exactly what floating is supposed to do. If you use table-cell for your display style, that may give you more of what you're expecting. Note that you'll have to use padding instead of margins if you use table-cell.
.container div
{
display: table-cell;
padding-left: 5px;
}
Here's a sample of this in use.
put the div's in a "fixed width" container div and prevent overflow. then have buttons or whatever at each end of the container div to "slide" the child divs left or right.