This is probably is a stupid question and it's really easy to solve, but I am having trouble doing so. My question is, how do I position the two last sections (shown in the picture) below the first ones?
http://imageshack.us/photo/my-images/829/63128947.jpg/
This is my code:
#main_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
border: 1px solid black;
max-width: 1000px;
}
#main_section{
width: 600px;
height: 450px;
border: 1px solid black;
padding: 5px;
margin: 10px;
}
#sub_section1{
width: 100px;
height: 200px;
border: 1px solid black;
padding: 5px;
margin: 10px;
-webkit-box-flex: 1;
}
#sub_section2{
width: 100px;
height: 200px;
border: 1px solid black;
padding: 5px;
margin: 10px;
-webkit-box-flex: 1;
}
#sub_section3{
width: 100px;
height: 200px;
border: 1px solid black;
padding: 5px;
margin: 10px;
-webkit-box-flex: 1;
}
#sub_section4{
width: 100px;
height: 200px;
border: 1px solid black;
padding: 5px;
margin: 10px;
-webkit-box-flex: 1;
}
Here's a fiddle that demonstrates one way to do it. I simply added another div element (I called it a "sidebar"), and put the smaller divs inside of it. Each element is floated, and the width of the sidebar container is wide enough to contain these elements. You may need to resize the viewport in the fiddle to get things to flow as you have them in your screenshot.
Since your smaller div elements are all styled the same, I opted to use a class instead of multiple ID's. This way you aren't duplicating rules unnecessarily in your CSS.
Also note that this could also probably be achieved with absolute positioning, if you're into that kind of thing. There are usually multiple ways of doing things in CSS.
I just added another layer of conatining divs and called them section_top/bottom. Since divs are block elements, it should push the other two down. I also cleaned up the styles just a little :-).
fiddle
Code:
<html>
<head>
<style>
#main_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
border: 1px solid black;
max-width: 1000px;
padding: 5px;
margin: 10px;
}
#main_section{
width: 600px;
height: 450px;
border: 1px solid black;
}
.subsection {
width: 100px;
height: 200px;
border: 1px solid black;
padding: 5px;
margin: 10px;
-webkit-box-flex: 1;
}
</style>
</head>
<body>
<div id="main_div">
<div id="main_section">
</div>
<div id="section_top">
<div id="sub_section1" class="subsection">
</div>
<div id="sub_section2" class="subsection">
</div>
</div>
<div id="section_bottom">
<div id="sub_section3" class="subsection">
</div>
<div id="sub_section4" class="subsection">
</div>
</div>
</div>
</body>
</html>
Related
I've searched and tried a lot of solutions but none of them is working for my case.
I have this set up where neither body nor main should change. Inside them I can add as many divs as I want and change any style.
<div class="body">
<div class="main">
<div class="should-be-full-height">
Content
</div>
</div>
</div>
.body {
display: flex;
flex-direction: column;
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: block;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
}
https://jsfiddle.net/eqwu3yfh/
I added background colors and borders just to see better what's going on.
I need the div with the .should-be-full-height class to use 100% of the height of its parent (.main). How can I achieve that?
Thanks. Sorry if this has been asked, I couldn't find an answer.
You either remove flex-direction: column from body and you can use height:100%
.body {
display: flex;
/* flex-direction: column;*/
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: block;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
height: 100%;
}
<div class="body">
<div class="main">
<div class="should-be-full-height">
Hi
</div>
</div>
</div>
Or you change the display of main to be flex and use width: 100%
.body {
display: flex;
flex-direction: column;
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: flex;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
width: 100%;
}
<div class="body">
<div class="main">
<div class="should-be-full-height">
Hi
</div>
</div>
</div>
I know you said you cannot change body and main but I don't see any other solution.
When two inline-block divs have different heights, why does the shorter of the two not align to the top of the container? (DEMO):
.container {
border: 1px black solid;
width: 320px;
height: 120px;
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
How can I align the small div at the top of its container?
Because the vertical-align is set at baseline as default.
Use vertical-align:top instead:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
Or as #f00644 said you could apply float to the child elements as well.
You need to add a vertical-align property to your two child div's.
If .small is always shorter, you need only apply the property to .small.
However, if either could be tallest then you should apply the property to both .small and .big.
.container{
border: 1px black solid;
width: 320px;
height: 120px;
}
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align: top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
vertical-align: top;
}
Vertical align affects inline or table-cell box's, and there are a large nubmer of different values for this property. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align for more details.
Use display: flex property for the parent div
The flexbox items are aligned at the start of the cross-axis.
By default, the cross-axis is vertical. This means the flexbox items will be aligned vertically at the top.
So when you apply the display: flex property to the parent div, it sets its child elements with vertical-align: top.
See the following code:
.container {
border: 1px black solid;
width: 320px;
height: 120px;
display: flex;
/** CSS flex */
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
Browser Compatibility: Flexbox is very well supported across modern browsers.
<style type="text/css">
div {
text-align: center;
}
.img1{
width: 150px;
height: 150px;
border-radius: 50%;
}
span{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
<span class='dif'></span>
<br>
<button>ADD</button>
</div>
<script type="text/javascript">
$('button').click(function() {
$('.dif').html("<img/>");
})
Add overflow: auto to the container div.
http://www.quirksmode.org/css/clearing.html This website shows a few options when having this issue.
I understand that the older technique for a situation like this would be to just put a blank in between the two elements that I want to separate, but how would I do this in a more elegant and semantic way?
https://codepen.io/sharpdesigner/pen/oywgeo
body {
font-family: arial;
text-align: center;
}
.block-container {
text-align: center;
margin: 30px auto;
}
.block-1 {
border: 1px solid #ccc;
width: auto;
padding: 20px;
margin: 0 auto 30px;
display: inline-block;
}
.block-2 {
border: 1px solid #ccc;
width: auto;
padding: 20px;
margin: 0 auto 30px;
display: inline-block;
}
<h3>How do you get these two blocks to display stacked vertically instead of on the same line, without using a div.clear?</h3>
<div class="block-container">
<a class="block-1" href="" title=""><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></a>
<a class="block-2" href="" title="">a.block-2</a>
</div>
You can do this using flex
.block-container {
max-width: 1250px;
margin: 30px auto;
display: flex;
flex-direction: column;
align-items: flex-start;
}
body {
font-family: arial;
text-align: center;
}
.block-container {
max-width: 1250px;
margin: 30px auto;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.block-1 {
border: 1px solid #ccc;
width: 500px;
padding: 20px;
display: inline-block;
margin-bottom: 20px;
}
.block-2 {
border: 1px solid #ccc;
width: 200px;
padding: 20px;
display: inline-block;
}
<h3>How do you get these two blocks to display stacked instead of on the same line, without using a div.clear?</h3>
<div class="block-container">
<a class="block-1" href="" title="">a.block-1</a>
<a class="block-2" href="" title="">a.block-2</a>
</div>
2nd Answer
Make the block2 element display: block
body {
font-family: arial;
text-align: center;
}
.block-container {
text-align: center;
margin: 30px auto;
}
.block-1 {
border: 1px solid #ccc;
width: auto;
padding: 20px;
margin: 0 auto 30px;
display: inline-block;
}
.block-2 {
border: 1px solid #ccc;
width: 200px;
padding: 20px;
margin: 0 auto 30px;
display: block;
}
<h3>How do you get these two blocks to display stacked instead of on the same line, without using a div.clear?</h3>
<div class="block-container">
<a class="block-1" href="" title=""><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></a>
<a class="block-2" href="" title="">a.block-2</a>
</div>
If I understood the issue correctly, Just try to put this CSS declaration on the parent container:
white-space: pre-line;
With this approach you avoid to transform the inline-block elements to a block elements.
pre-line - This value will cause sequences of whitespace to collapse into a single space character. Line breaks will occur wherever necessary to fill line boxes, and at new lines in the markup (or at occurrences of "\a" in generated content). In other words, it’s like normal except that it’ll honor explicit line breaks.
body {
font-family: arial;
text-align: center;
}
.block-container {
text-align: center;
margin: 30px auto;
white-space: pre-line;
}
.block-1 {
border: 1px solid #ccc;
width: auto;
padding: 20px;
margin: 0 auto 30px;
display: inline-block;
}
.block-2 {
border: 1px solid #ccc;
width: auto;
padding: 20px;
margin: 0 auto 30px;
display: inline-block;
}
<h3>How do you get these two blocks to display stacked vertically instead of on the same line, without using a div.clear?</h3>
<div class="block-container">
<a class="block-1" href="" title=""><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></a>
<a class="block-2" href="" title="">a.block-2</a>
</div>
I'm not sure i understood the questions correctly, but I suggest looking into CSS grid if it's applicable. I've altered your code pen just slightly to show what this would look like. You can display the elements vertically after specifying that you'd only like one column, in my example I've set the width of the column to auto using the grid-template-column attribute.
.block-container {
text-align: center;
margin: 30px auto;
display:grid;
/*by specifying that there is only one column, this should create vertical alignment.*/
grid-template-column: auto;
}
.block-1 {
border: 1px solid #ccc;
width: auto;
padding: 20px;
margin: 0 auto 30px;
display: inline-block;
}
.block-2 {
border: 1px solid #ccc;
width: auto;
padding: 20px;
margin: 0 auto 30px;
display: inline-block;
}
I noticed some strange behavior the other day and could not find the answer or reason why FF and Chrome behave differently on the following code (jsfiddle):
http://jsfiddle.net/t6g2P/
HTML:
<div class="container">
<div class="one">one</div>
<div class="two">two</div>
</div>
CSS:
.container {
float: left;
}
.container .one {
width: auto;
float: left;
overflow: hidden;
padding: 0 5px;
height: 20px;
border: 1px solid deeppink;
}
.container .two {
width: auto;
overflow: hidden;
padding: 0 5px;
height: 20px;
border: 1px solid purple;
}
FF: the elements are among each other
Chrome: the elements are floated
Any idea? Would be great to understand that inconsistent behavior. Thx! ;)
Greetz
I am trying to make a 3 column layout with the 2 fixed width divs (floated left and right) and with a fluid center div that changes it's width according to display width. All of those are contained in a wrapper div.
The way that I went about doing this is by creating to divs with fixed width that are floated left and right a 3rd div that is positioned relative the wrapper div with margin right in order to leave place for the right div to show.
However the problem is that if the fluid div has content it overflows the right div, ignoring the margin-right style. Why does this happen?
It also seems that the 1111 get's preformatted for some odd reason.
The code:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden; position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="border: 1px solid #999; position: absolute; left: 160px; margin-right: 160px;"><p>111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
</div>
I recommend using two divs floated.
On the right one, place the middle and the right divs.
All that is done via floats:
HTML:
<div class="left">content for the left</div>
<div class="rightContainer">
<div class="right">right content</div>
<div class="middle">middle content</div>
</div>
CSS:
.left {
float: left;
width: 100px;
overflow: hidden;
min-height: 30px;
background: red;
}
.rightContainer {
float: none;
min-height: 30px;
overflow: hidden;
background: yellow;
}
.right {
float: right;
width: 100px;
overflow: hidden;
min-height: 30px;
background: blue;
}
.middle {
overflow: hidden;
min-height: 30px;
background: green;
}
example:
UPDATE: applied to your content: http://jsfiddle.net/2KXW5/1/
This can be solved by specifying the style word-wrap: break-word; for your center fluid div.
Browsers don't work well with word-wrapping. Anyways I hope this code brings some help:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden; position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
<div style="border: 1px solid #999; position: relative; left: 10px; margin-right: 160px; overflow:hidden; word-wrap: break-word; "><p>111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
</div>
First: paragraph elemements are block-level elements. Google it to learn more. So if you want it to not overlap with the other You must float it as well.
so include this in the header (or separate file - or inline if you want):
<style type="text/css">
p {
float:left;
}
</style>
Then rearrange your divs:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden;position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
<div style="border: 1px solid #999; display:block; margin-left:160px; margin-right: 160px;overflow:auto;"><p >111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>