I am trying to align the first two divs inside "product-details" class. I removed the last div with clear:both; I gave 150px width to the first div with class "text-center".I gave display:inline-block and position:relative to both of the first divs. I made width of the second div auto.
When I check the computed values in the inspect element the first div is not accepting the display:inline-block. It shows display:block; and the two divs are not aligned horizontally. I have had this situation before also.
div.text-center {
display: inline-block;
position: relative;
}
div:nth-child(2) {
display: inline-block;
position: relative;
}
<div class="product-details">
<div class="text-center">...</div>
<div>...</div>
<div style="clear:both;"></div>
</div>
div.text-center is not taking display inline-block instead shows display block in the element inspector
The code does work. I right clicked on the second ... and clicked inspect element. You can see in the "Elements" tab then in the "Styles" tab that the default display: block was overridden by display: inline-block. What browser are you using? This is on the latest version of Chrome that I am getting this result.
As pointed out above, the code should work. You can try and force it to work by adding an important rule
div.text-center {display: inline-block !important;}
I removed floats and display changes from block to inline-block as required. That was the only option. Also I need to remove width auto and give width in % for both divs to align them horizontally. This was the solution I found. Thanks for your answers.
Related
I have 2 div boxes next to each other using display: inline-block.
Without content both inline-block divs are vertically aligned to top.
If both have content they also vertically align to top.
If only one of them has text content then the div box that has text content is vertically aligned to bottom while the one wihtout any text content remains vertically aligned to top.
If one box has plain text content and the other has e.g. an input field or a header tag then the box with only text content moves down only slighly (maybe 2 or 3px) while the one with the input or header tag stays on top.
Please see jsfiddle link below
Why did the creators do this instead of always aligning them to top? Is there a deeper reason behind this?
UPDATE:
In your example just add:
.content_boxes{
width: 400px;
height: 200px;
background: lightgreen;
display: inline-block;
vertical-align:top;
}
Fiddle:
http://jsfiddle.net/genwQ/1/
You have to set vertical-align:top; to each element is display:inline-block;. Careful not to confuse: it is the element, NOT the parent.
Example:
ul li {
display:inline-block;
vertical-align:top;
}
Demo:
http://jsfiddle.net/X3RLB/
Realize that an unwanted space appears between your inline-block elements. This space CANNOT be removed with the margin:0px; property. To remove them you must add a comment tag between inline-block the elements.
Example:
<div id="content_cnt">
<div class="content_boxes"></div><!--
--><div class="content_boxes">dsasda</div>
</div>
Fiddle:
http://jsfiddle.net/genwQ/2/
There are my codes. (jsfiddle)
Why this part of my codes isn't running?
header{background-color: #2bd5ec;}
I want to add background color to header tag. What i need to do?
The issue here is that since the elements inside your header are floated, they're considered in a different flow than your header, and thus it doesn't resize to fit them.
One way to fix this is to append <div style = "clear: both;"></div> to your header; little demo: little link.
You can also just add overflow: hidden; to your header: another little link, or float it as well: yet another little link.
you can set Height for Header.
for example :
header{background-color: red; height:100px;}
and you can use "clear" like this :
<header>
<div id="info">
<h1>Oyunn.in</h1>
</div>
<div id="categories">
<p>Barbie - Benten - Senten</p>
</div>
<br clear="all"/>
</header>
and css:
header{background-color: #2bd5ec;}
#info{float: left;}
#info h1{font-size: 100%;margin: 0;}
#categories{float: right;}
#categories p{margin:0;}
use overflow:hidden
header{background-color: #2bd5ec; overflow:hidden;}
The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.
Using the overflow property with a value different than visible, its default, will create a new block formatting context. This is technically necessary as if a float would intersect with the scrolling element it would force to rewrap the content of the scrollable element around intruding floats. The rewrap would happen after each scroll step and would be lead to a far too slow scrolling experience. Note that, by programmatically setting scrollTop to the relevant HTML element, even when overflow has the hidden value an element may need to scroll.
The overflow declaration tells the browser what to do with content that doesn't fit in a box. This assumes the box has a height: if it doesn't, it becomes as high as necessary to contain its contents, and the overflow declaration is useless.
SEE DEMO
Add
header{background-color: #2bd5ec;width:100%; height:30px;}
Background attribute usually needs div's dimensions
actually you didn't clear your child floats so whenever we are using float so we should clear the floats and we can give overflow: hidden; in our parent div to clearing the child floated div's.
header {
background-color: #2BD5EC;
overflow: hidden;
}
see the demo:- http://jsfiddle.net/vE8rd/17/
I want to have a setup like this:
<div id="block">
<div class="btn">2</div>
<div class="btn">1235e</div>
<div class="btn">really long one</div>
</div>
jsfiddle: http://jsfiddle.net/cutcopypaste/3uu5Q/
Where the btns and block div get their width based on the content. Just like it appears in the fiddle, except that the width of the btns are based on their text rather than their container
I cannot use a table because I need to be able to apply styling to get vastly different appearance, so I need the html markup to stay basically the same. If it's absolutely necessary I could apply some js.
I tried a couple different ways of displaying, but not sure how to acheive this. I don't wish to hard-code any widths as the content will be changing, and I need it to work in older versions of IE (though I can use libraries like IE9.js).
Here's an example of how the #block will be sized to be as wide as its longest button:
#block {
float: left;
}
.btn {
float: left;
clear: both;
}
The floated elements will expand only to their content's width. It's assuming you want each button on its own line.
If you want the buttons to flow together, remove the clear:both from the .btn rule. However if you do want them all on one line you'll have to be aware of float drop. This will happen if the widths of all your buttons added together is greater than the available width. In this case, the rightmost button will drop down below the other buttons.
Update: based on OP's comment, here's the CSS for a table cell style where #block and all .btn elements expand to the widest button's width:
#block {
display: inline-block;
}
.btn {
display: block;
}
Along with an example.
Where the btns and block div get their width based on the content.
I'm not 100% sure whether I get you right, but using display:inline elements like spans instead of <div>s should solve your problem.
make them float or inline, that way they won't act like blocks (wont be 100% width).
I have a <a> in a <div> but the <div> doesn't recongize the <a> and adjust and increase its height to accomodate the link.
Check it out my html/css here: http://jsfiddle.net/RjfVN/2/
That is because your section-link class has float: left;
You need to clear the float. To do this you can add a div directly after the closing </a> like:
<div style="clear: left;"></div>
Or
<div class="clearfix"></div>
And add .clearfix{ clear: both; } to your css so you can reuse it.
Put overflow:auto to your #main.
Yep, your link is using float:left. There are a few ways to fix it.
Have something after the link (like #footer for instance) clear: left (or both).
Float the #main container div as well, or give it position: absolute
Add overflow: auto to the #main container div.
However, in cases 2 & 3 you will need to set the width of the container as well, since it won't have the initial 100% width that it's using. Also, in Internet explorer, setting the width is actually required for the overflow to have any effect because it forces the container to hasLayout.
ie I have a div, below is a hidden div, which is wider than the div above. I want to specify the div inside to have elements with greater widths than the div above. these elements right hand side is aligned to the right hand side of the div above, but since it is wider, want the left hand side to break out. The div below is on a diff layer than the div above as it only appears on clicking on trigger element of div above.
Basically its a drop down list, with some random elements are wider than the image element above which, when clicked drops this list. but i want the list underneath to expand to the left breaking out of the parent div, without specifying exact positions. Therefore, the elements are all children of the parent div and right aligned to it, just like parent.
Hmmm, hope you can follow. Really appreciate any help. Thanks in advance.
Negative Margins seems to be the best answer. If anyone knows of cross browser issues, please post here. Perhaps I will but shalln't be testing for them for a week or two.
You should probably just use a select tag (for accessibility's sake) even though it won't look as fancy. But if you're set on it, try something like this (and add your javascript code to hide/show the list):
#wrapper {
width: 500px;
}
#select {
border: 1px solid black;
width: 180px;
float: right;
}
#options {
float: right;
clear: right;
text-align: right;
}
and
<div id="wrapper">
<div id="select">pick one...</div>
<div id="options">
<div class="option">I'm short</div>
<div class="option">I'm a very very very very very long option</div>
</div>
</div>
If you end up using this, change the options div to a ul tag and the option divs to li tags, or something semantically closer to what you're building. I just used divs to cut down on the amount of css in my example.