I have more than 100 divs on the page and each row has 3 divs. I want to remove left margin from first div and right margin from right div whereas center div should have 15px margin from left and right. Please guide me how can I do that without giving specific classes (no margin) on each div. Here is the example
here is my css code
.prp_box{
margin:15px 15px;
width:100px;
height:100px;
background:#5f03a6;
}
Check this out : http://jsfiddle.net/VHXEp/
Use nth-child(n) CSS3 selector.
You could try using the nth-child css selector.
#container:nth-child(3n+0)
{
margin-left: 0;
}
#container:nth-child(3n+3)
{
margin-right: 0;
}
This code might need a few adjustments, the 3n is how often, so every 3. The number after the + is where to start
Check the JsFiddle
http://jsfiddle.net/kpTdE/
.prp_box{
width:100px;
height:100px;
background:#5f03a6;
float:left;
}
.sec_box
{
width:100px;
height:100px;
background:#5f03a6;
float:left;
margin-left:30px;
}
.sec3_box
{
width:100px;
height:100px;
background:#5f03a6;
margin-left:260px;
}
Related
How can I position two divs with auto width side by side? The left div should take priority. Below is my attempt:
<div id='div_1'></div>
<div id='div_2'></div>
#div_1
{
display:inline-block;
float:left;
position:relative;
width:auto;
}
#div_2
{
display:inline-block;
float:right;
position:relative;
width:auto;
}
EDIT: Adding the goal for clarity -
'The goal is to make the first div be able to autosize itself. The second div should occupy the rest of the space.'
I believe you're looking for something like flexbox, which is not supported real well yet, I don't think.
An alternative is to configure the two as display: table-cell with a wrapping element using display: table and a width: 100%. See this question for a similar case:
https://stackoverflow.com/a/12650502/451969
What it would give you is something along the lines of:
<div id='wrapper'>
<div id='div_1'></div>
<div id='div_2'></div>
</div>
#wrapper
{
display: table;
width: 100%;
}
#div_1
{
display: table-cell;
}
#div_2
{
display: table-cell;
}
http://jsfiddle.net/mDyjE/
Fluid layouts rely on % width value. This is what you should use. For exemple: 50% for both of them.
Moreover, position: relative seems to be unnecessary here.
I assume the goal is to get them to be the same size, side by side. To do this, set width to be about 45% rather than auto. You use 45% because if you use 50% IE will drop the right div below the left.
#div_1
{
display:inline-block;
float:left;
position:relative;
width:45%;
}
#div_2
{
display:inline-block;
float:right;
position:relative;
width:45%;
}
I want the child divs to be always centered within their container, even on resize, and without changing their size.
Problem Example : http://jsfiddle.net/bQMj7/
HTML
<div id='foo'><div id="container" class='group'>
<div class='childs'>one</div>
<div class='childs'>two</div>
<div class='childs'>three</div>
<div class='childs'>four</div>
<div class='childs'>five</div>
</div>
</div>
CSS
#foo {
text-align:center;
}
#container {
background-color:beige;
display:inline-block;
}
.childs {
width:50px;
height:50px;
background-color:blue;
float:left;
margin-right:10px;
}
.group:after {
clear: both;
content: "";
display: table;
}
I used the "inline-block / text-align:center" technique to center the child divs in their main container. When you resize the window, the floated child divs collapse, that's what I want, BUT as they collapse they're not centered anymore within their container.
I want the cloud of these collapsing-on-resize divs, to be always centered.
Do you have any idea?
Edit : Thanks for the reply, that's pretty much what I'm looking for ! My concern however is that:
The reason why I used float left instead of inline-block is that I wanted those child divs to have no space between each others (which they do have as line elements unless I mess up my code indents to have those many childs on the same line code)
I want the collapsing final line to be aligned left just as the other lines, but the whole being centered.
Here's an update with the two issues above : http://jsfiddle.net/bQMj7/6/.
you may use inline-block for all of them and fake a float : center ; wich doesn't exist.
#container{
background-color:beige;
display:inline-block;
}
#foo{
text-align:center;
}
.childs {
width:50px;
height:50px;
background-color:blue;
display:inline-block;
margin:5px;
}
DEMO http://jsfiddle.net/bQMj7/1/
Is this what you are looking for:
http://jsfiddle.net/collabcoders/bQMj7/3/
#container{
background-color:beige;
display:inline-block;
}
#foo{
text-align:center;
}
.childs {
width:50px;
height:50px;
background-color:blue;
display:inline-block;
margin-right:10px;
}
.group:after {
clear: both;
content: "";
display: table;
}
EDIT: If I understand you correctly you want the space gone between blocks but still keep the center. inline-block for some reason put 4px space on the right so simply add margin-right: -4px; to fix:
HERE'S THE NEW FIDDLE: http://jsfiddle.net/collabcoders/bQMj7/10/
and the update to the .child class
.childs {
width:50px;
height:50px;
background-color:blue;
display:inline-block;
margin-right: -4px;
}
I'm among the coutless people who are facing the same problem about adapting parent's height to the contained elements. I did some research and found similar questions, but no answer could help me, so i thought i should open a new one.
I already tried the suggestions given as answers here, and here, like adding "clearfix" as a class for the container div (in this case, the clearfix class is there in the Fiddle i created), adding a workaround-spacer, and so on. I don't have any floated element, thought, so maybe it's a different kind of problem.
The problem still remains, in both the nested divs i have in my code (#content_wrapper doesn't adapt to #div_1 and/or div_2, while #div_2 doesn't increase its height to the contained <ul>.
I really hope to find a solution (maybe it's just something wrong in my code i can't de-bug).
Thanks for your attention.
Generally speaking, you want to avoid using absolute positioning for layout purposes.
What you're looking for is equal height columns. The whole point of equal height columns is that you don't need to know the height of any of the columns involved, they'll all be the same height and expand gracefully no matter what their contents are. The simplest way to achieve this is by using the table* display properties.
http://jsfiddle.net/UfWJh/3/
body {
font-size:10px;
}
/* wrappers */
#header_wrapper {
width:95%;
height:40px;
margin:auto;
margin-top:5px;
padding:2px;
border:1px solid red;
}
#content_wrapper {
display: table;
width:95%;
margin:auto;
margin-top:5px;
padding:2px;
border:1px solid red;
}
/* div1 */
#div_1 {
display: table-cell;
width:70%;
border:1px solid purple;
}
/* div 2 */
#div_2 {
display: table-cell;
width:25%;
border:1px solid purple;
}
#div_2 ul {
list-style-type:none;
}
#div_2 li {
width:100px;
height:30px;
margin:2px;
padding:1px;
border:1px solid darkgrey;
}
If you want a parent element to adapt to it's children you cannot explicitly define the value of the axes (width or height) that you want to adapt. Use width:auto or height:auto then use min-width,min-height,max-width & max-height to set minimum and maximum values for the adapting axis.
You then set values for the children, which can either be explicit values or again min and max thresholds.
From your rather messy code, it was easy to see, you have done much of it right, but you must not understand the position options. Try to gain a better understanding of relative,absolute & fixed positioning.
I've fixed it by changing the absolute positioning to relative and fixing a missing css selector for the styles you were trying to use on the <li>'s:
/* div1 */
#div_1 {
position:relative;
width:70%;
top:5px;
left:5px;
border:1px solid purple;
}
/* div 2 */
#div_2 {
position:relative;
width:25%;
top:5px;
right:5px;
border:1px solid purple;
}
#div_2 ul {
position:relative;
top:0px;
left:0px;
list-style-type:none;
}
#div_2 ul li {
width:100px;
height:30px;
margin:2px;
padding:1px;
border:1px solid darkgrey;
}
I suspect you probably don't need all those fixes you tried. Also, I find code so much more readable in this format.
Here's is my answer:
Remove position absolute (it's not a good idea to implement your layout like this...not cross-browser friendly...)
Make its content display: table
and then display: table-cell on the 2 divs to have even height...
Here is the example:
http://jsfiddle.net/Riskbreaker/UfWJh/4/
If you do not want it this way or care about equal height then use overflow:hidden on the content wrapper and float: left the 2 divs...
Here is the example:
http://jsfiddle.net/Riskbreaker/UfWJh/7/
I want to center a fieldset in my page but I don't know how.
I used this css code :
fieldset
{
margin:auto;
display: inline-block;
text-align:center;
}
but it only center the content of the fieldset
I also used a <p style="text-align:center;"> <fieldset> ...</fieldset></p>
but it wont work.
so how can I center it ?
Edit :
The CSS code I'm using now :
fieldset
{
text-align:left;
display: inline-block;
vertical-align:middle;
}
div
{
text-align:center;
vertical-align:middle;
}
You will have to add text-align:center to the parent element (maybe wrap it in a div and play with it if it's by itself.) to actually center the element and not the content. See if that works.
Remove the display attribute. It needs to be a block element (which it is by default) for margin: auto to work. Or do you need it for something?
The solution is to position the element absolutely, offsetting the div by 50% from the left and the top part of the window and move the div to the left and to the top with half its width and height with a negative margin, to have it perfectly centered.
and this is the CSS code:
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
This worked for me
#fieldset{
border-color:blue;
border-radius:10px;
margin:-100px 0 0 -150px;
position:absolute;
left:50%;
top:50%;
}
But I do not the line margin:-100px 0 0 -150px;
Why can't the #navbar be shifted further upwards ? I tried margin-top but it didn't work. Only an extremely large value had some effect, but the positioning is too skewed.
The #container contains all 3 elements.
#container {
position:relative;
margin: 0 auto;
width:790px;
}
#chicklogo {
float:left;
border:1px solid black;
}
#rightext {
float:left;
border:1px solid black;
}
#navbar {
clear:both;
border:1px solid blue;
}
It can't because #navbar has clear:both and is going to fall under the tallest of the floated elements. From your image, you can see that #rightext is taller and #navbar sits flush under it.
If you gave the logo and right text the same height then your nav would sit just under both.
I have created a JS Fiddle to demonstrate a negative margin-top which would mean the navbar would overlap the preceding element, even though it is set to clear: both.
Ideally, you would reduce the height of the #righttext element as it looks like the white-space in that element is causing your layout issue, but the negative margin-top can also work if that isn't possible.