I have one article tag, inside a php code that generate articles from wordpress. They are not all the same height ofc, it depends on the content. They are organised in two columns by float.
If a article in the first line is not the same height as the other one in the same row, the second row is aligned to the bottom of the biger div. Now I want to align them without any spacing.
Here is some css:
#container {
width: 1000px;
margin: 0px auto;
}
article {
position: relative;
width: 435px;
margin: 10px 10px;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
float: left;
}
Edit jsFiddle (now with content to demonstrate the problem): http://jsfiddle.net/4PMj5/6/
You can use even and odd chilren pseudo selection in your CSS.
article:nth-child(even) {
position: relative;
width: 435px;
margin: 10px 10px;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
float: right;
}
article:nth-child(odd) {
position: relative;
width: 435px;
margin: 10px 10px;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
float: left;
}
The result will be like: this updated fiddle.
Related
This question already has answers here:
What is the difference between display: inline and display: inline-block?
(7 answers)
Closed 3 years ago.
i try to fit span in another span but for some reason it doesnt work.
I have already tried display: flex and display: flexbox.
JSFiddle
html,
body {
height: 100%;
width: 100%;
}
body {
margin: 0;
background-color: #f0f0f0;
}
#midbox {
display: block;
position: absolute;
width: 90%;
height: 85%;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
background-color: #7d7c7d;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
#preview {
display: block;
position: relative;
height: 100%;
width: 35%;
background-color: #525052;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
#preview p {
margin: 0;
padding-top: 3%;
font-size: 2em;
opacity: 0.7;
color: #f0f0f0;
font-family: 'Lato', sans-serif;
text-align: center;
}
#cont {
display: block;
position: relative;
height: 100%;
width: 35%;
background-color: green;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
<span id="midbox">
<span id="preview">
<p>Preview</p>
</span>
<span id="cont">
<p>Why does this apper under the box and not on the left?</p>
</span>
</span>
Expectation:
Content of span with green background should be inside the lightgray box.
Output:
Content of span with green background is outside of any box.
Can you try adding float:left; to both your #preview span and #cont span. Float left forces two elements to stay on the left side.
#preview, #cont{
float:left;
}
I updated your fiddle. Try the fiddle here:
https://jsfiddle.net/edy0whkp/
Short Answer
You're setting display: block to your span elements. This turns them into block elements which start on a new line and they expand the size of their parent container. Changing the display to dispay: inline-block will cause the elements to not start a new line and to only take up as much space as they need.
https://jsfiddle.net/xypntkc0/
More details
In the JSFiddle I changed the parent element to be a div instead. Setting it to a div makes it a block component so you also don't need the display: block when it's a div. It's bad practice to place block elements inside of inline elements (you have a paragraph tag as a child tag to your span tags) So I would actually change all your span tags to divs
I also changed the position to position: relative on the parent component. You typically only want to set absolute to the children elements inside of a parent component that has position: relative. The parent is set as relative so that their absolute positioned children get positioned relative to the parent.
Even more detail
If you want to align elements next to each other inside of a container, a good tool to use is flexbox. You can set display: flex to the parent element to mark it as a flex container. Then the children will automatically be set as flex items and will render side by side and boom, you're done.
https://jsfiddle.net/vkru8wg7/
It looks like you're trying to make #preview and #cont sit side by side within #midbox. If this is the case, simply make #midbox {display: flex;}
body {
margin: 0;
background-color: #f0f0f0;
}
#midbox {
display: flex;
position: absolute;
width: 90%;
height: 85%;
top:0; right:0; bottom:0; left:0;
margin:auto;
background-color: #7d7c7d;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
#preview {
display: block;
position: relative;
width: 35%;
background-color: #525052;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
#preview p {
margin: 0;
padding-top: 3%;
font-size: 2em;
opacity: 0.7;
color: #f0f0f0;
font-family: 'Lato', sans-serif;
text-align: center;
}
#cont {
display: block;
position: relative;
width: 35%;
background-color: green;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
<span id="midbox">
<span id="preview">
<p>Preview</p>
</span>
<span id="cont">
<p>Why does this apper under the box and not on the left?</p>
</span>
</span>
If you want to learn about flexbox there's a great article at https://css-tricks.com/snippets/css/a-guide-to-flexbox/
When you uncomment the unordered list tag the second container div falls a bit down. If you actually could explain me why this is happening and told me how to remove this behavior I would be thankful.
html,
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
margin-right: 50px;
margin-left: 50px;
margin-top: 100px;
display: inline-block;
width: 300px;
height: 300px;
background-color: rgb(255, 255, 255);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
text-align: center;
color: rgb(38, 48, 90);
}
ul {
list-style-position: inside;
display: block;
}
<div class="container">
<h1> Depr </h1>
<!--<ul>
<li>Derping</li>
<li>Derping</li>
</ul>-->
</div>
<div class="container">
<h1> Derpina</h1>
</div>
The main reason behind why this occurs is, when you make any element to be inline-block, it aligns to baseline by default. So, when the heights of all elements are not same, it gets scrambled and aligned to their baseline. This is the main problem with all the inline-block and we should correct it by giving the right vertical alignment. To do that, please follow the below snippet:
I found your issue to be vertical alignment. Just give:
.container {
vertical-align: middle; /* This */
position: relative;
margin-right: 50px;
margin-left: 50px;
margin-top: 100px;
display: inline-block;
width: 300px;
height: 300px;
background-color: rgb(255,255,255);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0,
0.24);
text-align: center;
color: rgb(38, 48, 90);
}
Preview
Without the <ul> and with it:
JSBin: http://jsbin.com/zalagixovu/edit?output
Trying to make my first properly responsive site with a footer that remains offscreen untill scrolled to, then also notices content from above and moves with it. I have a site that does a similar thing but uses all sorts of horrible positioning/floating which i dont want on this one.
I have used all blocks/inline-blocks as its just going to be a basic portfolio sort of site. Here is a JSFiddle showing the problem, if you remove the divs called picture the footer remains in place.
http://jsfiddle.net/41s5vcu8/3/
html, body {
height: 100%;
width: 100%;
padding: 0;
margin:0;
font-family: "Raleway";
}
#head {
height: 30%;
display: block;
background-color: #DBB84D;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
#content {
height: 70%;
display: block;
background-color: #ececec;
}
#gallery_wrap {
max-width: 1200px;
height:100%;
width: 100%;
margin: auto;
box-shadow: 0 0 150px rgba(0, 0, 0, 0.1);
text-align: center;
}
#picture {
height:250px;
width: 250px;
display: inline-block;
background-color: #fff;
margin: auto;
}
#foot {
height: 300px;
display: block;
width: 100%;
background-color: #676767;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
There is some of the CSS, as i cant just post a JSFiddle. I have looked about for some advice but most things talk about sticky footers or using floats and what not. I have tried everythingi can think of and i just cant get it to move with the content....
Or if you know of a question that has already been answered for this that woul dbe great! I have loads of different #media's in this but i slimmed it down to make it less painful for you all.
So it turns out i have looked at this too much and missed a basic thing...
#content {
min-height: 70%;
display: block;
background-color: #ececec;
}
http://jsfiddle.net/41s5vcu8/5/
I am trying to make an expandable div that will have a minimum width of 200 px but will expand if the content is longer. the problem is the width always displays as 100%, If i put a width: 200px it will stay 200 and will not expand.
This is my CSS code for the div:
#section_title {
background-color: #2b65ae;
border-radius: 10px;
color: #ffffff;
padding: 5px 30px 0px;
background-size: 100% 100%;
font-size: 24px;
min-width: 200px;
height: 30px;
text-align: center;
font-style: italic;
margin: 0 auto;
text-transform: uppercase;
-moz-box-shadow: inset 0 0 8px #444444;
-webkit-box-shadow: inset 0 0 8px #444444;
box-shadow: inset 0 0 8px #444444;
}
You may use display:table properties to achieve this :
Update your CSS with :
display:table;
width: 200px;
DEMO , using just words and white-space to keep all on one line for the demo purpose.
You can use this
div {
float: left; /* or right according to your requirement */
width: auto;
min-width: 200px;
max-width: 100%;
}
This will keep the minimun width 200, will expand on more content and won't go beyond 100% width.
Try like this:
#section_title {
display:inline-block;
width: auto;
min-width: 200px;
max-width:100%;
}
Updated fiddle
If it's just for one line of content, then you can add a float to your css.
#section_title {
min-width: 200px;
height: 60px;
background-color: rgb(14,87,145);
float: left;
}
Example fiddle here.
I know it's shaky to get a full screen height div without using client-side scripting, but what about this: assuming my div is tall enough to reach the bottom, how do I make it reach the VERY top and bottom, without the little extra space at top and bottom? I've tried adding top and bottom margins (and even padding) of 0px, but it doesn't seem to work.
#container {
height: 1000px;
width: 800px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
background-color: #FFF;
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}
Try this:
html, body {
height: 100%;
}
#container {
height: 100%;
width: 800px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
background-color: #FFF;
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}
change height: 1000px; to height: 100%;