I have three divs in a row, all with display: inline-block. The left one (green) contains an image. Because of that image, two other divs (blue and yellow) and the div below them (grey) are all positioned lower by height of the image.
Why does an image in one div affect positions of other divs in an inline-block row? How can I avoid it?
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: black;
}
div {
display: inline-block;
width: 300px;
height: 70px;
}
div.wrapper {
width: 900px;
height: 100px;
margin: 0 auto;
background: red;
display: block;
font-size: 0;
}
div.div1 {
background: green;
}
div.div2 {
background: blue;
}
div.div3 {
background: yellow;
}
div.div4 {
display: block;
width: 900px;
height: 30px;
background: grey;
}
<body>
<div class="wrapper">
<div class="div1">
<img src="" width="25px" height="25px">
</div>
<div class="div2">b</div>
<div class="div3">c</div>
<div class="div4">d</div>
</div>
</body>
Try float:left; display:block; instead of inline-block for div's: Demo
CSS:
.div1, .div2,.div3 {
display: block;
float:left;
width: 300px;
height: 70px;
}
There already is discussons about inline-block-elementes still have weird heights (like here): Why does inline-block cause this div to have height?
Honestly, instead of solving those, i would adress this issue with floats:
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: black;
}
div {
/*display: inline-block;*/ /* Not necessary when using floats! */
width: 300px;
height: 70px;
}
div.wrapper {
width: 900px;
height: 100px;
margin: 0 auto;
background: red;
display: block;
font-size: 0;
}
div.div1 {
background: green;
float: left; /* Added float left here */
}
div.div2 {
background: blue;
float: left; /* Added float left here */
}
div.div3 {
background: yellow;
float: left; /* Added float left here */
}
div.div4 {
display: block;
width: 900px;
height: 30px;
background: grey;
}
Related
I have this code and I want the css code with a max-width: 780px, the .second in a line alone because it is the logo, and the .first and .third on the line below. I don't know how to do it.
Normally, this elements are Ordered in one line with a wider width than 780px. The normal order: first, second, third
The order I want with a max-width: 780px:
.................second..............
........first........|.......third......
<header>
<div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div>
</header>
header {
background: #FFF;
width: 100%;
height: 160px;
}
.SearchBar {
width: 30%;
height: 130px;
display: inline-block;
float: left;
text-align: center;
}
.SearchBar:before {
/* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle;
/* vertical alignment of the inline element */
height: 100%;
}
.SearchBar>p {
padding-right: 0;
padding-left: 0;
display: inline-block;
}
.SearchBar>p>input {
background: url("../images/search_icon.png") no-repeat scroll 0 0 transparent;
background-position: 90% 50%;
width: 230px;
height: 50px;
border: 1px solid #c8c8c8;
font-family: FuturaLight;
text-indent: 20px;
font-size: 18px;
}
.SearchBar>p>input:enabled {
cursor: text;
}
.logo {
width: 40%;
height: 130px;
display: inline-block;
margin: auto;
text-align: center;
}
.logo:before {
/* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle;
/* vertical alignment of the inline element */
height: 100%;
}
.logo a {
display: inline-block;
vertical-align: middle;
/* vertical alignment of the inline element */
}
.shoppingcar {
width: 30%;
height: 130px;
display: inline-block;
float: right;
text-align: center;
}
.shoppingcar:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.cartletter {
padding-right: 0;
padding-left: 0;
display: inline-block;
font-family: FuturaLight;
}
<header>
<div class="subheader"></div>
<div class="SearchBar">
<a> FIRST</a>
</div>
<div class="logo">
<a> SECOND</a>
</div>
<div class="shoppingcar">
<p class="cartletter">
<a> THIRD</a>
</p>
</div>
</header>
hmm, well since there's no css code and jsfiddle, I'm assuming this can do the trick ? try it on and let me know please ?
#media all and (max-width: 780px) {
.second {
display:inline-block;
}
.first {
display:inline;
float:left;
}
.third {
display:inline;
float:right;
}
}
Before you roll your eyes and move on, I know how to solve this problem by using a fixed height and absolution positioning with top: and bottom:, but I want to solve it without using fixed heights. I want to learn more about CSS so I'm trying to solve this a different way.
I have set up a typical navbar running across the top, and then a scrolling content div below.
However! How do I fit the bottom scrolling div container to the remaining space without using absolute coordinates? I can't do position: absolute, because then I'd need to know the height of the navbar to set "top:". And I can't do "bottom: 0" because I'd have to specify a height.
Here's the JS filddle:
http://jsfiddle.net/8dugffz4/1/
The class of interest is ".result". I currently have the height fixed, which I don't want.
Thanks, y'all.
PT
CSS:
* {
font-family: Helvetica, Sans;
border: 0px;
margin: 0px;
padding: 0px;
}
.navBar {
width: auto;
overflow: auto;
border-bottom: 1px solid #bbb;
}
.pageBar {
float: right;
}
.pager {
cursor: pointer;
float: left;
border: 1px solid #bbb;
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
margin: 5px;
margin-left: 0px;
background: #eee;
color: #bbb;
}
.pager:hover {
background: #777;
border: 1px solid black;
color: white;
}
.fliph {
-ms-transform:scale(-1,1); /* IE 9 */
-moz-transform:scale(-1,1); /* Firefox */
-webkit-transform:scale(-1,1); /* Safari and Chrome */
-o-transform:scale(-1,1); /* Opera */
}
.results {
background: gray;
width: 100%;
height: 200px;
overflow: scroll;
}
.line {
height: 10em;
line-height: 10em;
border: 1px solid red;
}
HTML:
<body>
<div class='navBar'>
<div class='pageBar'>
<div class='pager'>◁</div>
<div class='pager'>1</div>
<div class='pager fliph'>◁</div>
</div>
</div>
<div class='results'>
<div class='line'>Line1</div>
<div class='line'>Line2</div>
<div class='line'>Line3</div>
<div class='line'>Line4</div>
</div>
</body>
Here's a solution that uses display: table and can actually achieve fluid heights:
http://jsfiddle.net/8dugffz4/8/
And a minimalistic snippet in case you want to see specifically what I did:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#table {
display: table;
height: 100%;
width: 100%;
}
#table > div {
display: table-row;
}
#navbar {
height: 45px;
opacity: .5;
}
#navbar > div {
height: 100%;
background: black;
}
#results {
height: 100%;
}
#results > div {
height: 100%;
overflow: auto;
background: green;
}
<div id="table">
<div id="navbar">
<div></div>
</div>
<div id="results">
<div></div>
</div>
</div>
If you're just looking for an alternative to the position: absolute method, you could use the height: 100% method:
html, body { height: 100%; }
body { box-sizing: border-box; padding-top: 45px; }
.navBar { height: 45px; margin-top: -45px; }
.results { height: 100%; }
Like so: http://jsfiddle.net/8dugffz4/7/
I want to stack some div elements like the picture below without having to manually enter the position of every new div I add. Is there some way I can write a style tha will stack my elements like this? I would like to avoid javascript.
Doing something like:
div{
left:-30px;
}
will not work because its gonna move all of them by the same amount.
What I know I can probably do is have smaller divs as big as the gap next to each other and have them contain the bigger ones. The problem with this tho is I want to be able to change the stack order by manipulating the big element's z-index which wont work if they are children of different divs.
Here is a stack snippet:
div {
position: relative;
float: left;
width: 200px;
height: 300px;
}
#div_1 {
background-color: red;
}
#div_2 {
background-color: blue;
}
#div_3 {
background-color: yellow;
}
#div_4 {
background-color: green;
}
<body>
<div id="div_1">div1</div>
<div id="div_2">div2</div>
<div id="div_3">div3</div>
<div id="div_4">div4</div>
</body>
Is this what you are asking for ?
div {
position: relative;
float: left;
width: 200px;
height: 300px;
margin-right: -50px;
z-index: 0;
box-shadow: 0 0 2px 2px rgba(0,0,0,0.8);
}
div:hover {
z-index: 100
}
#div_1 {
background-color: red;
}
#div_2 {
background-color: blue;
}
#div_3 {
background-color: yellow;
}
#div_4 {
background-color: green;
}
<body>
<div id="div_1">div1</div>
<div id="div_2">div2</div>
<div id="div_3">div3</div>
<div id="div_4">div4</div>
</body>
Use dispaly:inline:block float:left;
body {
background: #d300ff;
margin: 0;
padding: 0;
}
.strip {
width: 100px;
height: 700px;
display: inline-block;
margin: 0;
padding: 0;
float: left;
}
.strip1 {
background: #fe0000;
}
.strip2 {
background: #ffa901;
}
.strip3 {
background: #41ff01;
}
.strip4 {
background: #01b7ff;
}
.strip5 {
background: #011eff;
}
<div class="strip strip1"></div>
<div class="strip strip2"></div>
<div class="strip strip3"></div>
<div class="strip strip4"></div>
<div class="strip strip5"></div>
HTML
<div class="whole">
<div class="fst"></div>
<div class="sec"></div>
<div class="thd"></div>
</div>
CSS
.whole {
width: 100%;
height: 20px;
}
.whole div {
height: 20px;
display: inline-block;
position: relative;
}
.fst {
float: left;
width: 20px;
background: blue;
}
.sec {
background: red;
}
.thd {
float: right;
width: 20px;
background: blue;
}
Is there a way to stretch the div.sec to fit with the area left by div.fst and div.thd in any screen size? The width of div.fst and div.thd is fix in pixel.
Is there any solution with only css?
Really appreciate your helps!
Please see my fiddle http://jsfiddle.net/vHHcf/
This seems to be what you want.
jsFiddle example
Given that you said .fst and .thd have fixed widths, you can use calc() to subtract the 40px value from 100%.
.sec { width:calc(100% - 40px); }
Updated CSS
.whole {
width: 100%;
height: 20px;
}
.whole div {
height: 20px;
display: inline-block;
position: relative;
}
.fst {
float: left;
width: 20px;
background: blue;
}
.sec {
background: red;
width:calc(100% - 40px);
}
.thd {
float: right;
width: 20px;
background: blue;
}
html
<div id="container">
<div id="one">One</div>
<div id="two">Two</div>
</div>
css
#container {
width: 500px;
height: 500px;
background-color: red;
}
#one {
width: 340px;
height: 100px;
margin: 20px;
background-color: green;
float: left;
}
#two {
width: 100px;
height: 100px;
margin: 20px 20px 20px 0px;
background-color: blue;
float: right;
}
This is what i want to do: http://jsfiddle.net/p4ZAd/
I want to make a margin of 20px between the two divs and this is how far Iv'e gotten, but is it possible to do it any other way?
What i would idealy like is to remove the width on the "#one" completely and just have it be maximum size with a margin towards the "#two".
LIke this
working fiddle
css
*{
margin:0;
padding:0;
}
#container {
width: 500px;
height: 500px;
background-color: red;
display:table;
}
#one {
background-color: green;
display:table-cell;
}
#two {
background-color: blue;
display:table-cell;
}
You can use table and table-cell display types to mimic how a table works. Then use border-spacing to accomplish the margin in-between cells.
HTML:
<div id="container">
<div id="one">One</div>
<div id="two">Two</div>
</div>
CSS:
#container {
display: table;
width: 500px;
height: 400px;
background-color: red;
border-spacing: 20px;
}
#one {
display: table-cell;
background-color: green;
}
#two {
display: table-cell;
width: 100px;
background-color: blue;
}
JSFiddle here
Here's a list of browsers that support display: table;
You can set padding on #container and then set negative right margin for #two. Example:
#container {
width: 360px;
height: 500px;
background-color: red;
padding: 20px 140px 20px 20px;
}
#one {
height: 100px;
background-color: green;
float: left;
width: 100%;
}
#two {
width: 100px;
height: 100px;
margin: 0 -120px 0 0;
background-color: blue;
float: right;
}
Working sample: http://jsfiddle.net/SytvY/1/