On my website i have the following layout:
outer-div with display: table
inner-div with display: table-row and width/height 100%
list-div with display: table-cell and width 25%
detail-div with display: table-cell and height 75%
Inside the list-div there is a ul with a few li elements. In the detail-div there is another div with width/height 100%. Here is an image how it looks at the beginning:
http://puu.sh/5e1wo.png
Notice the top margin of the list elements. When i click on one of the projects the idea is to add its (html-)description inside the detail-div element. While it works it oddly also affects the margin of the list-elements as you can see in the next pictures: http://puu.sh/5e1HI.png
http://puu.sh/5e1Iq.png
It somehow seems like the list elements are aligned to the content in the other div even if their first common anchestor is like 3 levels above. Is there a way to avoid this?
Open next inline-element using webkit-triads and then cross-ckeck the view with what u want. it works with chrome. do u have chrome or not?
Related
Button and div acts differently with the same styles. Actual difference in width: div have 100% of parent width, while button acting like display: inline; with minimal width, no actual inlining. And both have display: block;.
That strange button behavior is what I'm trying to achieve with div. Problem is that 'width: auto;' works in another way. So I'm gave div's same style as button have by default in chrome. As a result there is one property sets differently: -webkit-appearance, but changing it make no sense for width or display property.
Codepen
Also I'm tried to achieve that with display: flex;, but width becomes 100%.
If there's another way do achieve this, it have to deal with parent height: 0px and display: absolute
A button is displayed as inline-block. If you want a div to 'act' the same way
display the div as an inline-block as well. As to why buttons behave this way
see the following post:
button behavior
div{
border:black solid ;
display:inline-block;
}
<button></button>
<div>x</div>
I am trying to make an 'a' element fill the full height of the div, however I do not want it to take the full width.
It appears that my display:block is not helping me at all. Anyone know how to make this div full height? The height is variable, though. That's the point.
You should use display: inline-block; instead of using display: block; because using block will take up 100% of width where inline-block won't, like this : My Fiddle
I am trying to design a relatively positioned div, which in turn would consist two divs. None of the child divs have a fixed height, but they vary with the content, so the parent div expands with the taller of the child div. Now the design works fine, but when I was analyzing the code with Firebug, I saw that on hovering over the body tag in Firebug, only a short portion of the entire screen at the very top showed as the body. The side-panel confirmed it, the width of the body is ok, but the height is 0. That means the height of the parent div is 0, but Firebug tells me it is not, it is some 560px. How is it possible? I know elements don't expand with their content if the content is absolutely positioned, but here the child divs are relatively positioned, so why doesn't the parent expand with its contents? The fiddle is at http://jsfiddle.net/Cupidvogel/y79NS/6/. Th screenshot (please zoom to understand my point! It is when I try the code as a complete HTML page in Firefox):
In your CSS, div.clear - which you are using to attempt to clear your floats - is itself floated left. That means that it is not part of the document flow either and therefore cannot clear anything.
Removing float does the trick:
.clear { width: 400px; clear: both; position: relative; }
Alternately, if you want div.clear to be floated for some reason, there are a wide variety of other ways to clear your floats.
EDIT: div.main has a height of 520px because it is floated and floated elements "snap" to the dimensions of their children. If you floated body left (please don't; it's not a good idea), it too will "snap" to its children's dimensions and have a set height of 520px.
What here happens is normal browser behavior, you float divs, so there are not in the 'normal' flow anymore because of the float property.
So body is height 0, because body can not calculate height of elements that 'not in there'.
Move you div class="clear" out of the div class="main" and remove the float property aswell on the div class="clear", problem solved.
view: http://jsfiddle.net/y79NS/8/
I am really struggling with this and I have no idea why. I want to have text and an image on 1 line and centered inside a 100% width div. Here's a jsfiddle..
http://jsfiddle.net/JnbeJ/
floated elements automatically become block-level. It's impossible to center them via text-align: center. The only way for you to do is to make them inline-block like so: display: inline-block. I added vertical-align: top; for the h to be at the top. The working example is here: http://jsfiddle.net/skip405/JnbeJ/4/
Your image and text can't float left and be centred at the same time...
You have a div that is 100% width (btw/ divs are 100% to begin with), and trying to center a div inside it that is also 100% width. You can either put a width on the inner div, or make it inline-block.
Updated fiddle.
You are using a wrapper with class name "centered" so instead of making both elements (display: inline-block;), just add this to style your wrapper:
.centered {display: inline-block; margin: 0 auto;}
You also have an additional (text-align: center;) in your containers css that does not need to be there.
I have a div with no set hieght and a min-height of 250px.
When I put in content that is taller than 250px, the div gets longer, as expected.
When I put in a table, the div remains 250px and the table extends outside the div area (in height only, not width).
I tried adding style="display: block;" to the table, but that didnt help.
I have no idea why a table specificly would be a problem in this situaltion.
Maybe its a specific CSS thing?
If you are using IE7
try using the property. of your div that is miss-behaving.
display: inline-block
You can create a class that is quick and easy to apply for this problem.
.inlineblk {
display: inline-block
}