I have seen many examples in stackoverflow, most of them are with floats- I have a 3 column divs (dont have a parents div) - first column has dynamic width - other 2 have fixed widths - can I get a solution with out using floats - tried giving percentages, did not work - also tried using table-cell - but may be i am not using it in right way - any examples/ideas:
div .first{
margin: 12px 0 5px 225px;
width:580px;
}
div a.second{
margin: -19px 0 5px 470px;
display: block;
}
div a.third{
margin: -15px 0 5px 640px;
display: block;
}
HTML
<div id="container">
<div id="first_dynamic_width" >
<span>abcdsef</span>
</div>
<span> <a> </span>
<span> <a> </span>
</div>
by using display:block you cannot make them side by side because the block means that it is going on the next line. Make them display:inline or display:inline-block so they can move to next to each other and then try to style them again.
Related
There are multiple ways posted here to uncollapse a vertical PARENT margin, but nothing about uncollapsing vertical margins of adjacent elements. The only solution I found was in this answer (back in 2009):
<div style="overflow: hidden; height: 0px; width: 0px;"> </div>
Almost 7 years passed since there. Is some better way to do this (possibly using some CSS3)?
Basically, suppose you have: http://jsfiddle.net/ok2u3o3c/
<div class="one"></div>
<div class="two"></div>
div {
width: 300px;
height: 200px;
}
.one {
margin-bottom: 10px;
background-color: blue;
}
.two {
margin-top: 20px;
background-color: red;
}
What would be the most elegant way to make the distance between these 2 boxes 30px instead of 20px (where the first margin contributes 10px and doesn't collapses)?
Let's start with the relevant documentation explaining the behavior of collapsing margins:
8 Box model - 8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
The following rules apply, which means that there are a things that you can do to prevent the margins from collapsing for sibling elements:
Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children)
Therefore if you float the elements with collapsing margins, they will no longer collapse:
.collapsing-margins {
margin: 100px 0;
background: #f00;
float: left;
width: 100%;
}
<div class="parent">
<div class="collapsing-margins">Element</div>
<div class="collapsing-margins">Element</div>
</div>
Margins of inline-block boxes do not collapse (not even with their in-flow children).
Therefore you could also add change the display of the elements to inline-block:
.collapsing-margins {
margin: 100px 0;
background: #f00;
display: inline-block;
width: 100%;
}
<div class="parent">
<div class="collapsing-margins">Element</div>
<div class="collapsing-margins">Element</div>
</div>
I am trying to create tabs using CSS instead of images. I want the tabs to automatically adjust to the content within them, however I want them to have a max-width of 200px. I would like for the tab width to adjust to the content automatically so that the tabs will have variable widths but maintain the 20px left/right padding. Can anyone explain how to go about this?
Here's my HTML so far:
<div class="tab">
TEST
</div>
And my CSS:
.tab {
text-align:center;
background:#000;
padding:0 20px;
max-width:200px;
border-radius: 10px 10px 0 0;
color:#fff;
}
And a JSFiddle!
Thanks!
Use the display:inline css or make the div a span:
<span class="tab">
TEST
</span>
add display: inline-block to make it collapse to the width of the content.
I have a total of 8 boxes with images inside. I have 4 boxes across (4 columns) in each row (2 rows total). They are set to float: left and display: inline. The columns and rows all align perfectly when the height is fixed.
Like so:
(http://4.bp.blogspot.com/-o_rRBylW7Gk/UbOnL-IHSTI/AAAAAAAAFFw/udM5_Bhhz7k/s640/post-sized.PNG)
But when I add height:auto... the 2nd row stacks at the 3rd column.
Like so:
(http://3.bp.blogspot.com/-J3dkWTM2OCw/UbOnQutKSBI/AAAAAAAAFF4/qTsBLn84ukE/s1600/post-auto.PNG)
The desired result is for all rows and columns to align without the images being skewed and stretched. As long as the desire result is achieved, I don't have a preference on how this is done (jQuery or otherwise).
I tired clear both, vertical align to top, the clearfix after, display table-cell instead of display inline, etc.. I tried everything I could find online.
Here is the CSS:
.post{
float:left;
display:inline-block;
list-style: none;
width: 200px;
height: auto;
overflow:hidden;
margin-right: 12px;
margin-bottom: 12px;
padding: 10px;
background-color: white !important;
}
.post-body {
width: 100% !important;
height: auto;
overflow: hidden;
padding: 0px !important;
margin: 0px !important;
}
.post img {
width: 100% !important;
height:auto;
padding: 0px;
margin: 0px;
}
It's in the Blogger.com (blogspot) platform.
It's difficult to add the whole HTML, you would have to understand the Blogger format or at least XML codes but here are the main sections:
<b:section class='main' id='main' maxwidgets='3' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<b:includable id='post' var='post'>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/>
</div>
</div>
</b:includable>
</b:includable>
</b:widget>
</<b:section>
The accepted answer in this page: div float or display inline-block to left AND top might be a solution. JQ-Masonry: http://masonry.desandro.com/
I presume you have two main divs. One for the first line and one for the second and potentially more divs inside holding the images? If so try placing this:
<div style="clear:both;">
</div>
inbetween the end of the first line div and the start of the second line div
I'm trying to get a parent div tag to hold n children div tags such that they are all on the same line, yet grouped together in the center. For example:
Here the children are blue, and the parent is red.
Here are the things I've tried:
Making blue divs display:inline to get them on the same line. Problems: doesn't display even with its width and height both set to 10px.I tried adding , but it only was a couple pixels wide.
Making blue divs float:left. Problems: Have to programmatically resize red parent to child contents since the divs are floated and then center in its parent to get what I want. There should be a solution that doesn't involve javascript.
For IE6 and IE7 compatibility you might have to add zoom:1; and *display:inline; to your child CSS
jsFiddle
.parent {width:100%;border:1px solid red;text-align:center;}
.child {width:15%;display:inline-block;border:1px solid blue;}
<style>
.container {
width: 100%;
padding: 0;
text-align: center;
border: 1px solid red;
}
.inner {
display: inline-block;
margin: 0 5px;
border: 1px solid blue;
}
</style>
<div class="container">
<div class="inner">
one
</div>
<div class="inner">
two
</div>
<div class="inner">
three
</div>
</div>
Stick the blue divs in a container div. Find their widths (margin and padding included) and give the container div that width. Then set the container div's margin to 0 auto, stick it in the red div and you should be fine.
Try to use display: inline-block;:
.child {
display: inline-block;
...
}
http://jsfiddle.net/mupuR/
is there a better way to fix the height of a child to the main parent height?
I tryed so but it doesn't works for me:
.child {
background: none repeat scroll 0 0 #5B6567;
border-radius: 5px 0 0 0;
display: inline-block;
float: left;
line-height: 30px;
padding-top: 6px;
position: relative !important;
text-align: center;
width: 12%;
height:100%
}
<div class="row-fluid">
<div class="child">
child
</div>
</div>
jsfiddle http://jsfiddle.net/WTmt6/1/
check I want the grey left div to fix the height of the red one big .media div
ps: I can't use fixed/px dimensions I only use percentage/% on my layout
I'm still not sure if I understand the problem...
First of all, remove the padding on child as it is going to cause trouble with the height:100%. You should add the padding in an inner div:
.inner {
padding:6px;
}
<div class="child">
<div class="inner">child</div>
</div>
The height 100% is working fine. Here is an example of 3 childs (two of them are equal), floating inside a floating parent without problems: http://jsfiddle.net/qRPYt/7/
If you are still having trouble, please, post the CSS of row-fluid or even better, a jsfiddle.