I have a div with its content (list inside),
<div id="container">
<ul id="list">
<li>
<div class="title">
something
</div>
<div class="text">
something again
</div>
</li>
<li>
<div class="title">
something
</div>
<div class="text">
something again
</div>
</li>
</ul>
</div>
And my items from list are displayed float:left, and I want to the div container expand in height as its content.
#container{
position: relative;
width: 100%;
padding-bottom: 30px;
}
#list{
position: relative;
padding-top: 80px;
width: 95%;
/*height: 100%;*/
padding-bottom: 10px;
}
#list li{
position: relative;
float: left;
list-style: none outside none;
width: 20%;
height: 170px;
/*border:1px solid black;*/
}
You have several options:
Clearfix on the container:
#container:after {
clear: both;
content: "";
display: table;
}
The use of overflow:
#container {
overflow: hidden; /* or: auto | scroll */
}
Float the container:
#container {
float: left;
}
Using inline-block instead of float for the list items:
#container ul li {
display: inline-block;
float: none;
}
Try this approach...
li {
display: inline-block;
float: none; /* only if you have this set as you mentioned in your post */
}
#container {
height: auto;
}
Related
At the beginning I want to say that I just study frontend so I need to help with something.
I want to prepare some tab slider.
I have something in left and right so my tab slider will be on center.
My tab slider have two buttons: < and > (slide to left; slide to right).
In my tab slider are a lot of elements which sum of widths exceeds a max-width of parent div (it has "content" class).
I want to hide all elements which are out of parent div bounds so I try to use
overflow: hidden;
but unfortunately those elements fell to second row.
div.menu {
width: 100%;
display: block;
float: left;
}
div.content {
display: inline-block;
width: 50%;
max-width: 50%;
background-color: lightgray;
max-height: 40px;
overflow: hidden;
}
div.left,
div.right {
display: inline-block;
width: 24%;
background-color: green;
}
div.flex {
display: flex;
}
ul,
li {
display: inline-block;
}
li {
background-color: yellow;
width: 30px;
}
<div class="menu">
<div class="left">something in left</div>
<div class="content">
<div class="flex">
<i><</i>
<ul>
<li>i-1</li>
<li>i-2</li>
<li>i-3</li>
<li>i-4</li>
<li>i-5</li>
<li>i-6</li>
<li>i-7</li>
<li>i-8</li>
<li>i-9</li>
<li>i-10</li>
<li>i-11</li>
<li>i-12</li>
<li>i-13</li>
<li>i-14</li>
<li>i-15</li>
<li>i-16</li>
</ul>
<i>></i>
</div>
</div>
<div class="right">something in right</div>
</div>
What I'm doing wrong?
I expect that if I use overflow and max-height my exceeds elements will be hide (on right - on one row) and not will be fall to second row.
There is my example.
Will you help me with that?
You need to use white-space: nowrap in .flex so that all items remains in the same line
div.menu {
width: 100%;
display: block;
float: left;
}
div.content {
display: inline-block;
width: 50%;
max-width: 50%;
background-color: lightgray;
max-height: 40px;
overflow: hidden;
}
div.left,
div.right {
display: inline-block;
width: 24%;
background-color: green;
}
div.flex {
display: flex;
white-space: nowrap;
position: relative;
}
ul {
padding-left: 10px;
padding-right: 10px;
}
ul,
li {
display: inline-block;
}
li {
background-color: yellow;
width: 30px;
}
.flex i {
position: absolute;
top: 10px;
}
.flex i.prev {
left: 0;
}
.flex i.next {
right: 0;
}
<div class="menu">
<div class="left">something in left</div>
<div class="content">
<div class="flex">
<i class="prev"><</i>
<ul>
<li>i-1</li>
<li>i-2</li>
<li>i-3</li>
<li>i-4</li>
<li>i-5</li>
<li>i-6</li>
<li>i-7</li>
<li>i-8</li>
<li>i-9</li>
<li>i-10</li>
<li>i-11</li>
<li>i-12</li>
</ul>
<i class="next">></i>
</div>
</div>
<div class="right">something in right</div>
</div>
I am trying to create a box with an image on the left and text (title, price & description) aligned on the right. The problem is, the text is always displayed outside the box. What am I doing wrong here?
.photo {
width: 100%
}
.menu__item {
width: 100%;
border: 1px solid #c4c4c4;
display: block;
}
.menu__item__photo {
width: 40%;
padding-right: 16px;
display: block;
}
.menu__item__info__photo {
width: 60%;
display: block;
float: right;
}
.menu__item__info__title {
float: left;
width: 78%;
}
.menu__item__info__price {
float: right;
width: 21%;
text-align: right;
}
<div class="menu__item">
<div class="menu__item__photo">
<img src="http://placehold.it/350x150" class="photo">
</div>
<div class="menu__item__info__photo">
<div class="menu__item__info__title">Product Title Here</div>
<div class="menu__item__info__price">$9.99</div>
<div class="menu__item__info__description">Description here..</div>
</div>
</div>
Here is a fiddle: https://jsfiddle.net/pxanzefe/
You can float your left item too:
Float the .menu__item__photo item and add box-sizing to include the padding inside the 40% width.
Use a clearfix method on your container.
.photo {
width: 100%
}
.menu__item {
width: 100%;
border: 1px solid #c4c4c4;
display: block;
}
.menu__item:after {
content: "";
display: table;
clear: both;
}
.menu__item__photo {
width: 40%;
padding-right: 16px;
display: block;
float: left;
box-sizing: border-box;
}
.menu__item__info__photo {
width: 60%;
display: block;
float: right;
}
.menu__item__info__title {
float: left;
width: 78%;
}
.menu__item__info__price {
float: right;
width: 21%;
text-align: right;
}
<div class="menu__item">
<div class="menu__item__photo">
<img src="http://placehold.it/350x150" class="photo">
</div>
<div class="menu__item__info__photo">
<div class="menu__item__info__title">Product Title Here</div>
<div class="menu__item__info__price">$9.99</div>
<div class="menu__item__info__description">Description here..</div>
</div>
</div>
If you just want the text contained within the box, add overflow: auto; to the containing div:
.photo {
width: 100%
}
.menu__item {
width: 100%;
border: 1px solid #c4c4c4;
display: block;
overflow:auto;
}
.menu__item__photo {
width: 40%;
padding-right: 16px;
display: block;
}
.menu__item__info__photo {
width: 60%;
display: block;
float: right;
}
.menu__item__info__title {
float: left;
width: 78%;
}
.menu__item__info__price {
float: right;
width: 21%;
text-align: right;
}
<div class="menu__item">
<div class="menu__item__photo">
<img src="http://placehold.it/350x150" class="photo">
</div>
<div class="menu__item__info__photo">
<div class="menu__item__info__title">Product Title Here</div>
<div class="menu__item__info__price">$9.99</div>
<div class="menu__item__info__description">Description here..</div>
</div>
</div>
When you float elements they're removed from the flow of the document and adding the overflow rule restores the behavior you're after.
I have a footer which has a variable height. The largest element is an image which is automatically centered via the padding of the footer. Next to the image there is a little navigation and a copyright statement below. To the far right there is a button to go back to top.
I've included a fiddle where I got all the elements vertically centered but I got the result by adding the height on some elements. Now my question is if there is a way to achieve this result but without adding the height of the biggest element?
My fiddle
.footer {
background: darkgray;
}
.wrap {
position: relative;
width: 960px;
margin: 0 auto;
padding: 30px 0;
}
.wrap:after {
content: "";
display: table;
clear: both;
}
.left {
width: 29%;
float: left;
}
.left img {
height: 160px;
}
.center {
text-align: center;
float: left;
width: 50%;
height: 160px;
}
.center-wrap {
display: inline-block;
vertical-align: middle;
}
.center:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.right {
position: relative;
float: left;
width: 20%;
height: 160px;
}
.right a {
position: absolute;
right: 0;
top: 50%;
margin-top: -25px;
}
/* Styles */
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline-block;
margin-left: 20px
}
nav ul li:first-child {
margin-left: 0;
}
.right a {
display: block;
width: 50px;
height: 50px;
background: black;
}
<div class="footer">
<div class="wrap">
<div class="left">
<img src="http://placehold.it/500x500" alt="" />
</div>
<div class="center">
<div class="center-wrap">
<nav>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</nav>
<p>© 2015 copyright COMPANY NAME // All Rights Reserved</p>
</div>
</div>
<div class="right">
top
</div>
</div>
</div>
You can vertically align anything with just 3 lines of CSS.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Go nuts.
Don't forget vendor prefixes.
I'm working on my homepage and I'm trying two get a header with 3 columns.
The first column should be a logo, the second a navigation menu and the third a language switcher.
The nav and the lang. switcher should be align to the right and have auto width (so only the width needed by the content).
The img should be floated to the left and should fill the empty width (!but not bigger than 100% of the img width and with max-height!)
If the browser width gets smaller, than the img should be shrinked, but the right contents should be the same size.
.frame {
max-width: 90%;
height: 75px;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
}
#top-header {
width: 100%;
height: 100px;
position: fixed;
z-index: 100;
text-transform: uppercase;
font-weight: bold;
background-color: #CCC;
}
#top-header .frame {
position: relative;
top: 10px;
}
#top-header .frame div {
white-space: nowrap;
}
#top-header .frame > div,
nav {
float: right;
}
#top-header .frame > div:first-child {
float: left;
max-width: 60%;
}
#mainmenu {
position: relative;
top: 25px;
}
#mainmenu .moduletable {
display: block;
position: static;
}
#mainmenu ul.nav.menu {
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
margin: 0;
padding: 0;
list-style-type: none;
}
#mainmenu ul.nav.menu li {
font-size: .92rem;
-ms-flex: 1 1 auto;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
position: relative;
}
#mainmenu ul.nav.menu li a {
display: block;
margin: 10px;
}
<body>
<header id="top-header">
<div class="frame">
<div id="logo">
<div class="moduletable">
<div class="custom">
<p>
<img alt="logo" src="http://lorempixel.com/1637/100">
</p>
</div>
</div>
</div>
<div id="language-switcher"></div>
<nav id="mainmenu">
<div class="moduletable">
<ul class="nav menu">
<li class="item-101 current active"> Home
</li>
<li class="item-102 deeper parent"> About us
</li>
<li class="item-103"> XXXXXXXX
</li>
<li class="item-104"> XXXXXX
</li>
</ul>
</div>
</nav>
</div>
</header>
</body>
Here's an example of my current try at jsFiddle
Thanks and have a nice day :)
I think i understand now.
I changed your layout to work similar to a table with
dislpay:table
for the #top-header .frame
and dislpay:table-cell
for the logo and the menu
here is the fixed jsFiddle
How to stretch parent div to fit children div?
I tried to add element with clear: both; after content but it didn't work for me.
HTML:
<div id="wrapper">
<div class="left-menu">
</div>
<div class="right-bar">
<div class="right-content">
<div class="content">
<div class="content-wrapper">
<div class="content-body">
Here is content
</div
</div>
</div>
</div>
</div>
</div>
CSS:
.left-menu {
background-color: #0B0C0E;
width: 20%;
height: 100%;
float: left;
}
.right-bar {
background-color: #F0F0F0;
height: 100%;
width: 100%;
}
.right-content {
float: left;
width: 80%;
}
.right-content > .content {
padding: 21px 0 0 42px;
}
.right-content > .content > .content-wrapper {
width: 98%;
height: 70%;
}
.right-content > .content .content-body {
background-color: #FAFAFA;
padding: 20px;
font-size: 24px;
border: 1px solid #D0D0D0;
}
sandbox for test: http://roonce.com/en/room/SwZuEJYB
Thanks in advance.
Use "clear-fix" technique. http://css-tricks.com/snippets/css/clear-fix/
This will allow the parent div to be the appropriate size of the floated elements within. Note this works specifically on #wrapper. (http://jsbin.com/huqehuta/1/edit)
.clear-fix:after {
content: "";
display: table;
clear: both;
}