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
Related
I've got a simple question which hopefully has a simple answer. It seems basic but I just can't get my head around it.
So, I've got four boxes arranged in a container:
div {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.wrapper {
box-sizing: content-box;
height: 600px;
width: 600px;
margin: 100px auto;
border: 2px solid gray;
}
.box-container {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.box {
width: 300px;
height: 300px;
padding: 0px;
}
.c {
background-color: cyan;
}
.y {
background-color: yellow;
}
.m {
background-color: magenta;
}
.k {
background-color: black;
}
<div class="wrapper">
<div class="box-container">
<div class="box c"></div>
<div class="box y"></div>
<div class="box m"></div>
<div class="box k"></div>
</div>
</div>
I've applied box-sizing: border-box; to the divs, but for some reason padding is having no effect at all. If I use margin then it makes the divs too big for the wrapper, and they move position.
What am I missing here?
Thanks in advance
Jamie
Your HTML & CSS is correct. If you need padding on all the .c .m .y .k boxes, then use
.box {
width: 300px;
height: 300px;
padding: 10px;
border: 10px solid #000; //border also works
}
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.
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>
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>
Here's what I tried: http://jsfiddle.net/tJxCD/6/
I want to create a layout like this:
But I don't know how to make the third rectangle on bottom of the second.
http://jsfiddle.net/kHT8z/1/
.wrapper {
overflow: hidden;
width: 500px
}
.top {
border: 3px solid #000;
width: 300px;
height: 170px;
margin: 5px;
float: left;
}
.right {
border: 3px solid #000;
width: 150px;
height: 75px;
margin: 5px;
float: left;
}
.bottom_small {
border: 3px solid #000;
float: left;
margin: 5px;
height: 50px;
width: 90px;
}
.bottom_big {
border: 3px solid #000;
float: left;
margin: 5px;
height: 75px;
width: 150px;
}
<div class="wrapper">
<div class="top"></div>
<div class="right"></div>
<div class="right"></div>
</div>
<div class="bottom_big"></div>
<div class="bottom_small"></div>
Hard to tell exactly what your after but your divs can share several css properties and you can use classes to specify size only. This JSFiddle represents your diagram.
Of course this layout is dependent on the width of the containing element, in this case the body, so you need to be aware of that.
HTML layout:
<html><body>
<div class="large"></div>
<div class="medium"></div>
<div class="medium"></div>
<div class="medium"></div>
<div class="small"></div>
</body></html>
CSS:
div {
border: 1px solid gray;
margin: 5px 5px 0 0;
float: left;
}
div.large{
width: 300px;
height: 175px;
}
div.medium {
width: 150px;
height: 84px;
}
div.small{
width: 100px;
height: 44px;
}