Should be simple enough. I have a div with a width of 1100px which contains divs of width 300px. I need to space them out equally and clear to the next line below once no more can fit within the 1100px width. Best way to do this? I've never needed to do it.
I think this is what you're looking for. You can use nth-of-type to add margin to the middle boxes
.background{
background: black;
width: 1100px;
margin: auto
overflow: hidden;
}
.box{
width: 300px;
height: 300px;
float: left;
margin: 0 0 20px
}
.box:nth-of-type(3n+2){
margin: 0 100px 20px;
}
FIDDLE
Related
I am having a difficult time with a margin issue. Basically I have 4 boxes displayed inline.
I have the boxes themselves and then an internal container .connect-box-wrap. What I am trying to do is to get the horizontal margin for the .connect-box-wrap to be auto, so the start of the content is around the middle point of the box, making the #contact-connect appear more centered. Right now it looks as if the internal container is aligned left and not taking the margin: 0 auto;.
I am wanting the text to still be aligned left...I just want the internal container to have the horizontal auto margin.
Any ideas?
Fiddle
Here is what it looks like now (paint image showing borders, if it had them).
What I want this to look like is this:
This is a summary of the code, see the fiddle for the full code for all four boxes.
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
}
#contact-connect-box-container {
margin: 0 auto;
width: auto;
}
.contact-connect-box {
width: 25%;
margin: 60px 0 0 0;
display: inline-block;
/*border: 1px solid black;*/
vertical-align: top;
opacity: 0;
transition:1s; -webkit-transition:1s;
}
.connect-box-wrap {
margin: 0 auto;
}
<div id="contact-connect">
<div id="contact-connect-box-container">
<div class="contact-connect-box">
<div class="connect-box-wrap">
<h2 class="contact-connect-title">A</h2>
<div class="contact-connect-description">555.555.5555</div>
</div>
</div>
</div>
</div>
</div>
</div>
To use margin: 0 auto; when centering elements, there are a few things that are required as outlined in this answer:
https://stackoverflow.com/a/4955135/2106563
The element must display: block
The element must not float
The element must not have a fixed or absolute position
The element must have a width that is not auto
So the only thing missing in your implementation is setting the width. You can set it to a percentage less than 100% and you should notice a change that you're looking for. https://jsfiddle.net/bm4jpwh1/2/
Add a width to the .connect-box-wrap, such as width:80%. Otherwise it will default to 100% width and the margin:0 auto won't do anything.
Margin: 0 auto only works if the element has the width set. Plus the element can't be display: inline or display:block.
An alternative would be to set the element to display: inline-block and set the parent with text-align: center.
add to #contact-connect text align center and give to .contact-connect-box text align left.
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
text-align: center;
}
.contact-connect-box {
width: 20%;
margin: 60px 0 0 0;
display: inline-block;
/*border: 1px solid black;*/
vertical-align: top;
opacity: 1;
transition:1s; -webkit-transition:1s;
text-align: left;
}
Fiddle Example
I have a border which I am wrapping around the page using <div>. The parent element is the actual page. I can't seem to figure out why the margin-bottom is not working.
.page_border {
border: 20px solid;
height: 960px;
width: 720px;
margin-top: 24px;
margin-bottom: -24px;
margin-left: 24px;
}
<div class="page_border"></div>
I think the fact you have the bottom margin set to a negative value might be the issue if what you want to do is put a margin between the div and the bottom of the page. If you remove the negative sign that should work. See below.
.page_border {
border: 20px solid;
height: 960px;
width: 720px;
margin: 24px 0 24px 24px;
}
<div class="page_border"></div>
Not sure on what you are asking completly.
Could you not put a height value onto the body tag, and then adjusting the height: value; from div, by doing so though the body will have a fixed height and you may need to set overflow: auto; on the div.
I'm new to HTML and CSS so please bear with me. I am trying to create a responsive grid where a parent div has 4 child divs contained within it. Resizing the browser both vertically and horizontally when there are no margins between the child divs works successfully. However, when I begin to create margins between the child divs, resizing the browser vertically causes the bottom child div to overlap the parent div - which I do not want.
I tried using the overlap: hidden property however this causes the bottom child div to be hidden (truncated) when the browser is vertically changed - again, I do not want this behaviour.
What I want is the child divs to have equal margins and when I vertically change the browser, the child divs to be contained within the parent div, regardless of the browser vertical size.
Here is my code:
html {
width: 100%;
height: 100%;
}
body {
width: 70%;
height: 100%;
background-color: black;
margin: 0 auto;
}
#div_container {
width: 100%;
height: 100%;
background-color: white;
}
#div1 {
width: 94%;
height: 24%;
background-color: green;
margin: 0% auto 1% auto;
}
#div2 {
width: 94%;
height: 25%;
background-color: yellow;
margin: 0% auto 1% auto;
}
#div3 {
width: 94%;
height: 25%;
background-color: blue;
margin: 0% auto 1% auto;
}
#div4 {
width: 94%;
height: 25%;
background-color: red;
margin: 0% auto 1% auto;
}
<div id="div_container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
Hopefully my question makes sense - if not then please let me know.
Any help would be greatly appreciated.
Thanks
Like ckuijjer said, the vertical values are relative to the width and not to the height.
One solution would be the usage of calc.
.container div {
height: calc(25% - 21px);
width: 80%;
margin: 0 auto 28px;
background: #f00;
}
Here is an example on codepen. But the browser support isn't very good.
The percentage for the margin-top and margin-bottom is based on the width instead of the height. See the discussion in Why are margin/padding percentages in CSS always calculated against width?
It might be an option to take a look at the vh unit which allows you to set a size as a percentage of the viewports height
My situation:
On my page I have multiple collapsible panels in the right hand column of my main content.
At the moment what happens is when I expand the panel (which contains a large amount of text) it goes off the page.
Therefore meaning that the user can't read it. This due the fact that the height is hard coded.
Now what I want to happen is when the div expands, if it reaches the max height of the page, the page height expands to incorporate all of the text.
Question:
Is there a way to make it possible that the page height expands along with the div?
My CSS:
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
height: 0px auto;
}
#page {
overflow: hidden;
width: 900px;
padding: 0px 50px 50px 50px;
background-color: #FFFFFF;
}
#content {
float: right;
width: 580px;
}
Thankyou for any suggestions
Instead of using height you could try to set position to "absolute" and 0px top and bot on the .container?
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
top: 0px;
bottom: 0px;
}
You can make .container a clearfix so it will expand to the size of the floated element inside of it. Here's a great article on using clearfix.
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
height: 0px auto;
}
.container:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
That code will work for everything outside of IE6&7. If you need tose too just take a look at the article.
Never mind guys, I solved it....It was due to the fact that i was positioning the div with a relative height and width, so i just used margin-top instead.
Thanks to everyone
so i have a normal 960px layout, i want to add a div that can use 300px inside that 960 and the rest of the space (browser width) i want to fill with that div...but always stay on the same position inside the wrapper (im not talking about a vertical fixed element)
can i do this without using javascript? but if theres isnt another option its ok
Example:
<div class="wrapper">
<div class="fill">Something</div>
</div>
CSS:
.wrapper {
margin: 0 auto;
width: 960px;
background: #ddd;
}
.fill {
margin: 300px 0 0 0;
width: 300px;
background: red;
}
thank you
If I well understood what you need: try this fiddle
http://jsfiddle.net/jGmcV/show/
http://jsfiddle.net/jGmcV/ (source)
this should be the effect, but I placed an extra wrapper around your wrapper. The width of red box inside the dark container is always of 300px no matter what the size of the viewport is.
You can use margin-left:-10%; and margin-right:-10%;
If i understood correctly.
or you can
.wrapper {
margin: 0 auto;
width: 960px;
background: #ddd;
position:relative;
}
.fill {
margin: 300px 0 0 0;
width: 300px;
background: red;
position:absolute;
top:0px;
left:-10%;
}