I have created a list that contains movie cases and a title beneath each case. However, I can't get the list items to center themselves.
Here's what it looks like:
Here's what I want it to look like:
In the following CSS rules, I have centered #main-container with margin: 0 auto
#main-container {
width: 600px;
margin: 0 auto;
}
However, that just centers #main-container, not the list items.
I think it has something to do with this CSS rule.
.element {
position: relative;
margin: 0;
float: left;
}
JSFiddle
#main-container {
width: 600px;
margin: 0 auto;
}
#movies-container {
padding: 0;
margin: 0;
}
#movies-container li {
list-style: none;
margin-right: 15px;
}
.element {
position: relative;
margin: 0;
float: left;
}
.cover {
background: grey;
width: 90px;
height: 130px;
}
.element img {
width: 90px;
height: 130px;
opacity: 1;
-webkit-transition: opacity 0.2s linear;
}
.element .title {
height: 20px;
margin-top: 5px;
text-align: center;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background: #fff;
color: #333;
width: 100%;
}
<div id="main-container">
<ul id="movies-container">
<li class="element">
<div class="cover">
<a href="#">
<img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
</a>
</div>
<div class="title">9</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
</div>
<div class="title">300</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
</div>
<div class="title">9</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
</div>
<div class="title">Gladiator</div>
</li>
<li class="element">
<div class="cover">
<a href="#">
<img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
</a>
</div>
<div class="title">9</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
</div>
<div class="title">300</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
</div>
<div class="title">9</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
</div>
<div class="title">Gladiator</div>
</li>
</ul>
</div>
Working Solution for Internet Explorer too
If you give float it doesn't work out. Check this out:
Preview
Snippet
#main-container {
width: 600px;
margin: 0 auto;
}
#movies-container {
padding: 0;
margin: 0;
text-align: center;
}
#movies-container li {
list-style:none;
margin-right: 15px;
}
.element {
position: relative;
margin: 0;
display: inline-block;
}
.cover {
background: grey;
width: 90px;
height: 130px;
}
.element img {
width: 90px;
height: 130px;
opacity: 1;
-webkit-transition: opacity 0.2s linear;
}
.element .title {
height: 20px;
margin-top: 5px;
text-align: center;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background: #fff;
color: #333;
width: 100%;
}
<div id="main-container">
<ul id="movies-container">
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
</div>
<div class="title">9</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
</div>
<div class="title">300</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
</div>
<div class="title">9</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
</div>
<div class="title">Gladiator</div>
</li> <li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
</div>
<div class="title">9</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
</div>
<div class="title">300</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
</div>
<div class="title">9</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
</div>
<div class="title">Gladiator</div>
</li>
</ul>
</div>
Fiddle: https://jsfiddle.net/6qo6zL6f/3/
Flexbox works fine for the solution.
Added CSS
#movies-container {
display: flex;
flex-flow: row wrap; /* Wrap to next line */
justify-content: center; /* Center all rows */
}
Check the Browser compatibility table for Flexbox
#main-container {
width: 600px;
margin: 0 auto;
}
#movies-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 0;
padding: 0;
}
#movies-container li {
list-style: none;
margin-right: 15px;
}
.element {
position: relative;
margin: 0;
float: left;
}
.cover {
background: grey;
width: 90px;
height: 130px;
}
.element img {
width: 90px;
height: 130px;
opacity: 1;
-webkit-transition: opacity 0.2s linear;
}
.element .title {
height: 20px;
margin-top: 5px;
text-align: center;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background: #fff;
color: #333;
width: 100%;
}
<div id="main-container">
<ul id="movies-container">
<li class="element">
<div class="cover">
<a href="#">
<img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
</a>
</div>
<div class="title">9</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
</div>
<div class="title">300</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
</div>
<div class="title">9</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
</div>
<div class="title">Gladiator</div>
</li>
<li class="element">
<div class="cover">
<a href="#">
<img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
</a>
</div>
<div class="title">9</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
</div>
<div class="title">300</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
</div>
<div class="title">9</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
</div>
<div class="title">Gladiator</div>
</li>
</ul>
</div>
This is how I would achieve the effect you're looking for, the main differences are using inline-block on .element and text-align: center on #main-container.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
#main-container {
width: 600px;
margin: 0 auto;
text-align: center;
}
#movies-container,
.element {
margin: 0;
padding: 0;
}
#movies-container {
font-size: 0;
}
.element {
display: inline-block;
list-style: none;
padding: 7.5px;
}
.cover {
background: grey;
width: 90px;
height: 130px;
}
.element img {
width: 90px;
height: 130px;
opacity: 1;
-webkit-transition: opacity 0.2s linear;
}
.element .title {
height: 20px;
margin-top: 5px;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background: #fff;
color: #333;
width: 100%;
}
<div id="main-container">
<ul id="movies-container">
<li class="element">
<div class="cover">
<a href="#">
<img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
</a>
</div>
<div class="title">9</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
</div>
<div class="title">300</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
</div>
<div class="title">9</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
</div>
<div class="title">Gladiator</div>
</li>
<li class="element">
<div class="cover">
<a href="#">
<img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
</a>
</div>
<div class="title">9</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
</div>
<div class="title">300</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/12244.jpg" />
</div>
<div class="title">9</div>
</li>
<li class="element">
<div class="cover">
<img src="http://cparliaros.com/imdb/img/thumbnails/1271.jpg" />
</div>
<div class="title">Gladiator</div>
</li>
</ul>
</div>
Related
I have this HTML code and the result is that my whole page is center aligned. This causes my background color in the top navigator to be centered and my footer to be centered too. But both in the initial box and in the footer and in the header there is the scrollbar and it does not put these elements on the whole page.
Can anyone help me to solve this problem?
body, html {
height: 100%;
width: 100%;
}
html,
body {
margin: auto;
padding: 0%;
}
.section {
width: 100%;
}
.container.slidercontent {
background: #D4988E;
}
.container {
position: relative;
width: 1170px;
margin: auto;
color: #444;
font-size: 14px;
font-weight: 300;
font-family: Roboto;
overflow: hidden;
}
.section .container {
padding: 50px 0 50px 0;
}
.section.bg {
background: #f7f7f7;
}
/*
Header
*/
.hold {
height: 80px;
}
.header {
line-height: 80px;
width: 100%;
transition: line-height 0.2s linear, box-shadow 0.2s linear;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: rgba(245, 245, 245, 0.97);
}
.header.small {
line-height: 50px;
box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.8);
}
.header.small > .container > #logo {
height: 40px;
}
#logo {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: red;
float: left;
height: 40px;
width: 170px;
margin-left: 5px;
}
/*
Slider
*/
.section .slider,
.section .footer {
background: #333;
}
.slidercontent {
text-align: center;
}
.hero {
font-family: 'roboto';
color: white;
font-weight: normal;
letter-spacing: 1px;
}
h1.hero {
font-size: 54px;
}
h2.hero {
font-size: 20px;
margin-bottom: 60px;
font-family: 'arial'
}
h1.hero:after {
content: "";
width: 300px;
position: relative;
border-bottom: 1px solid #aaa;
text-align: center;
margin: auto;
margin-top: 15px;
}
.call {
color: white;
display: block;
margin-bottom: 20px;
}
.call span {
display: inline;
border: 1px solid white;
padding: 8px 13px;
font-size: 20px;
transition: background 0.15s linear;
}
.call span:hover {
background: rgba(255, 255, 255, 0.1);
cursor: pointer;
}
/*
Columns
*/
.col {
float: left;
padding: 0;
margin: 0;
position: relative;
}
.col.four {
width: 23%;
margin: 0 1%;
}
.col.three {
width: 31.3%;
margin: 0 1%;
}
.col.two {
width: 40%;
margin: 0 2.5%;
padding: 0 2.5%;
}
.col.extrapad {
padding-top: 20px;
padding-bottom: 20px;
}
.col .service,
.col .feature {
font-size: 21px;
font-weight: 300;
font-family: 'Roboto Slab', sans-serif;
}
.col .service:after {
content: "";
width: 50px;
position: relative;
border-bottom: 1px solid #eee;
display: block;
text-align: center;
margin: auto;
margin-top: 15px;
}
.col .feature {
font-size: 19px;
}
.col h1.side,
.col p.side,
.col span.side:first-of-type {
margin-left: 50px;
text-align: left;
}
.col .icon {
border-radius: 50%;
height: 85px;
width: 85px;
line-height: 85px;
text-align: center;
margin: 0 auto;
transition: background 0.25s linear, color 0.25s linear;
}
.col .icon.side {
position: absolute;
padding: 0;
margin: 0;
top: -15px;
height: 50px;
width: 50px;
}
.col:hover > .icon {
background: #F44336;
color: white;
}
.col:hover > .icon.side {
background: initial;
color: initial;
}
.responsivegroup {
display: none;
}
/*
Column specifics
*/
.col p,
.col h1 {
padding: 0%;
text-align: center;
}
.group.margin {
margin-bottom: 20px;
}
.col .imgholder {
height: 300px;
width: 100%;
background: #333;
transition: background 0.3s linear;
}
.col.bg {
background: #FFF;
}
.col.pointer {
cursor: pointer;
}
.col.bg:hover .imgholder {
background: #555;
}
.col span.feature {
font-size: 20px;
}
/*
Text
*/
.container > h1:not(.hero) {
margin-bottom: 30px;
text-align: center;
}
.container > h1:after {
content: "";
width: 30px;
position: relative;
border-bottom: 1px solid #aaa;
display: block;
text-align: center;
margin: auto;
margin-top: 15px;
}
h2 {
font-family: 'Roboto Slab', sans-serif;
text-align: center;
font-weight: 400;
font-size: 18px;
}
.left,
.left > h1,
.left > p {
text-align: left;
}
.reset {
text-align: left !important;
}
.reset:after {
display: none !important;
}
/*
Gallery
*/
div.gallery {
border: 1px;
margin-bottom: 25px;
}
div.gallery:hover {
border: 1px solid #D4988E;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 8px;
text-align: center;
font-family: Verdana;
}
div.desc1 {
padding: 12px;
text-align: center;
font-family: Garamond;
font-weight: bold;
font-size: 18px;
letter-spacing: 1px;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 25%;
}
.footer {
position:relative;
left: 0px;
right: 0px;
right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/css/style.css">
<title>flowerbee</title>
</head>
<body>
<!-- topnav======================================== -->
<div class="topnav">
<div style="position:relative;padding-top:0%; bottom: 0;">
<iframe src="TopNav.html" width="100%" height="55" allowfullscreen></iframe>
<style>iframe {border: none}</style>
</div>
</div>
<div class="section">
<div class="slider">
<div class="container slidercontent">
<h1 class="hero">flowerbee</h1>
<h2 class="hero">Flower delivery</h2>
</div>
</div>
</div>
<!-- galleria prodotti======================================== -->
<div class="section bg">
<div class="container">
<h1>Product gallery</h1>
<h2>all our bouquets!</h2>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/BigBang.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Big Bang/BigBang1.jpg" alt="Big Bang" width="600" height="600">
</a>
<div class="desc1">Big Bang</div>
<div class="desc">starting from 33.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Iris.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Iris/Iris1.jpg" alt="Iris" width="600" height="400">
</a>
<div class="desc1">Iris</div>
<div class="desc">starting from 35.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Sundays.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Sundays/Sundays1.jpg" alt="Sundays" width="600" height="400">
</a>
<div class="desc1">Sundays</div>
<div class="desc">starting from 35.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Lilac.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Lilac/Lilac1.jpg" alt="Lilac" width="600" height="400">
</a>
<div class="desc1">Lilac</div>
<div class="desc">starting from 29.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Onirium.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Onirium/Onirium1.jpg" alt="Onirium" width="600" height="600">
</a>
<div class="desc1">Onirium</div>
<div class="desc">starting from 33.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Zanni.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Zanni/Zanni1.jpg" alt="Zanni" width="600" height="400">
</a>
<div class="desc1">Zanni</div>
<div class="desc">starting from 39.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Suite.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Suite/Suite1.jpg" alt="Suite" width="600" height="400">
</a>
<div class="desc1">Suite</div>
<div class="desc">starting from 39.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/BoraBora.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/BoraBora/BoraBora1.jpg" alt="BoraBora" width="600" height="400">
</a>
<div class="desc1">Bora Bora</div>
<div class="desc">starting from 42.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Moonwalk.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Moonwalk/Moonwalk1.jpg" alt="Moonwalk" width="600" height="600">
</a>
<div class="desc1">Moonwalk</div>
<div class="desc">starting from 33.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Birdy.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Birdy/Birdy1.jpg" alt="Birdy" width="600" height="400">
</a>
<div class="desc1">Birdy</div>
<div class="desc">starting from 51.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Manila.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Manila/Manila1.jpg" alt="Manila" width="600" height="400">
</a>
<div class="desc1">Manila</div>
<div class="desc">starting from 35.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/OceanEyes.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/OceanEyes/OceanEyes1.jpg" alt="OceanEyes" width="600" height="400">
</a>
<div class="desc1">OceanEyes</div>
<div class="desc">starting from 42.00 €</div>
</div>
</div>
<!-- recensioni======================================== -->
<div class="section">
<div class="container">
<h1>Wow? Wow wow wow wow!</h1>
<h2>Wow</h2>
<div class="col three">
<h1 class="icon side">[]</h1>
<h1 class="feature side">Wow</h1>
<p class="side">Wow wow wow wow wow wow wow wow wow wow wow wow wow</p>
</div>
<div class="col three">
<h1 class="icon side">[]</h1>
<h1 class="feature side">Wow</h1>
<p class="side">Wow wow wow wow wow wow wow wow</p>
</div>
<div class="col three">
<h1 class="icon side">[]</h1>
<h1 class="feature side">Wow</h1>
<p class="side">Wow wow wow wow wow wow wow wow wow wow wow</p>
</div>
<div class="group margin"></div>
<div class="col three">
<h1 class="icon side">[]</h1>
<h1 class="feature side">Wow</h1>
<p class="side">Wow wow wow wow wow wow wow</p>
</div>
<div class="col three">
<h1 class="icon side">[]</h1>
<h1 class="feature side">Wow</h1>
<p class="side">Wow wow wow wow wow wow wow wow</p>
</div>
<div class="col three">
<h1 class="icon side">[]</h1>
<h1 class="feature side">Wow</h1>
<p class="side">Wow wow wow wow wow wow wow wow</p>
</div>
<div class="group margin"></div>
</div>
<!-- footer======================================== -->
<div class="footer">
<div style="position:relative;padding-top:0%; bottom: 0;">
<iframe src="Footer.html" width="100%" height="370" allowfullscreen></iframe>
<style>iframe {border: none}</style>
</div>
</div>
</body>
</html>
you could do <div class="center"></div> to fix your situation with the centering but Iframe displays a webpage so using it for anything else other then to advertise a webpage would be pretty useless but just use the attribute scrolling="no" for your iframe and for css .center { text-align: center; }
I have a Html page in which Navigation bar and footer adjust itself according to the screen width but my main content isn't adjusting itself.
I have apllied media query but it's for resolution of mobile(517 px) but when I tested it on a pc in another with less screen width it was overflowing
All the area within class"bhavya" is overflowing out of screen.
/* Making of Box 1 on Left for posts */
.box1 {
background-color: white;
width: 746px;
height: auto;
border: 1px solid lightgray;
border-radius: 2px;
margin-top: 50px;
margin-left: 50px;
display: block;
}
/* Button to show more */
#myBtn {
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
cursor: pointer;
}
.show {
display: none;
}
/* Styling Box For Search Box */
.search {
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
width: 384px;
height: 130px;
float: right;
margin-top: 50px;
margin-left: 828px;
display: block;
position: absolute;
}
/* Search Written*/
.search h3 {
margin-bottom: -40px;
text-align: center;
}
/* Style the search box */
.search input[type=text] {
padding: 13px;
border: 1px solid lightgray;
margin-top: 70px;
margin-left: 50px;
font-size: 17px;
height: 15px;
}
/* Style the button */
.search button[type=button] {
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
}
/* Recent Post Column */
.recent {
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
width: 384px;
height: 850px;
float: right;
margin-top: 220px;
margin-left: 828px;
display: block;
text-align: center;
position: absolute;
}
/* img in recent */
#post1 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text1 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 2nd post */
#post2 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text2 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 3nd post */
#post3 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text3 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* Post Section fitting */
.container {
width: 746px;
}
.container .row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(333.33px, 1fr));
}
/* Seperate Post*/
.container .row .col {
margin: 20px;
display: none;
}
/*post Image*/
.container .row .col .imgBox {
width: 100%;
height: 220px;
}
.container .row .col .imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px 5px 0 0;
}
/*show more*/
.btn {
padding: .7rem 2rem;
background: royalblue;
border: none;
color: #FFF;
margin: 20px auto;
display: block;
font-size: 1.3rem;
cursor: pointer;
outline: none;
transition: .3s;
}
.btn:hover {
opacity: .8;
}
#media screen and (max-width: 600px) {
.search {
margin-top: 30px;
border: px;
margin-left: 50px;
}
.box1 {
width: 384px;
margin-top: 190px;
height: fit-content;
}
.recent {
display: none;
}
.container {
width: 384px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<meta content="Free HD Movie And Compressed Games Download From a High Speed Server, Try Now , One Click
Direct Download Link Available">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<title>GameMovieMania</title>
</head>
<body>
<h1 class="heading"><b><i>GameMovieMania</i></b></h1> <br>
<div class="topnav" id="myTopnav">
Home
Games
Movies
Contact
About
<a href="javascript:java script/code.js;" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="bhavya">
<div class="search">
<h3>Search</h3>
<input type="text" id="myInput" placeholder="Search.." onkeyup="searchOn()">
<button type="button"> Search </button>
</div>
<div class="recent">
<h3>Recent Post</h3>
<div class="post1">
<a href="gta5.html">
<img src="images/gta5.jpeg" id="img1">
<p class="text1">Grand Theft Auto 5 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post2">
<a href="gta4.html">
<img src="images/gta4.jpeg" id="img2">
<p class="text2">Grand Theft Auto 4 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post3">
<a href="gta3.html">
<img src="images/gta3.jpeg" id="img3">
<p class="text3">Grand Theft Auto 3 | Free <br>Download | Highly Compressed </p>
</a>
</div>
</div>
<span class="box1">
<div class="container">
<ul class="row">
<li class="col">
<div class="imgBox">
<img src="images/gta5.jpeg" alt="">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 5 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/nowayhome.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Spiderman No Way Home | Full Movie Download Hindi |
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta4.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 4 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/shershaah.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Shershaah Full movie download HD
</h2>
</div>
</li>
<li class="col">
<a href="sooryavanshi.html">
<div class="imgBox">
<img src="images/sooryavanshi.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Sooryavanshi Full Movie Download HD
</h2>
</div>
</a>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta3.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 3 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
</ul>
<button class="btn">Load More</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(".col").slice(0, 4).show()
$(".btn").on("click", function(){
$(".col:hidden").slice(0, 4).slideDown()
if ($(".col:hidden").length == 0) {
$(".btn").fadeOut('slow')
}
})
function searchOn() {
let input = document.getElementById('myInput').value
input=input.toLowerCase();
let x = document.getElementsByClassName('col');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
</script>
</span>
</div>
<div class="footer-basic">
<footer>
<div class="social">
<a href="#">
<i class="icon ion-social-instagram"></i>
</a>
<a href="#">
<i class="icon ion-social-snapchat"></i>
</a>
<a href="#">
<i class="icon ion-social-twitter"></i>
</a>
<a href="#">
<i class="icon ion-social-facebook"></i>
</a>
</div>
<ul class="list-inline">
<li class="list-inline-item">Home</li>
<li class="list-inline-item">About</li>
<li class="list-inline-item">Contact</li>
<li class="list-inline-item">Privacy Policies</li>
<li class="list-inline-item">Terms And Conditions</li>
</ul>
<p class="copyright">GameMovieMania Corp. © 2022</p>
</footer>
</div>
</body>
</html>
i hope this can some help
i added display:grid to your code and modified some of them
body{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 20vh 20vh auto 20vh;
grid-template-areas:
"h h h"
"b b s"
"b b r"
"f f f";
}
.header{
grid-area: h;
}
.box1{
grid-area: b;
background-color: white;
/* width: 746px; */
height: auto;
border: 1px solid lightgray;
border-radius: 2px;
margin-top: 50px;
margin-left: 50px;
display: block;
}
/* Button to show more */
#myBtn{
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
cursor: pointer;
}
.show{
display: none;
}
/* Styling Box For Search Box */
.search{
grid-area: s;
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
/* width: 384px; */
height: 170px;
/* float: right; */
margin-top: 50px;
/* margin-left: 828px; */
display: block;
/* position: absolute; */
}
/* Search Written*/
.search h3{
margin-bottom: -40px;
text-align: center;
}
/* Style the search box */
.search input[type=text] {
padding: 13px;
border: 1px solid lightgray;
margin-top: 70px;
margin-left: 50px;
font-size: 17px;
height: 15px;
}
/* Style the button */
.search button[type=button] {
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
}
/* Recent Post Column */
.recent{
grid-area: r;
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
/* width: 384px; */
height: 100%;
/* float: right; */
margin-top: 220px;
/* margin-left: 828px; */
display: block;
text-align: center;
/* position: absolute; */
}
/* img in recent */
#post1 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text1 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 2nd post */
#post2 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text2 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 3nd post */
#post3 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text3 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* Post Section fitting */
.container {
/* width: 746px; */
}
.container .row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(333.33px, 1fr));
}
/* Seperate Post*/
.container .row .col {
margin: 20px;
display: none;
}
/*post Image*/
.container .row .col .imgBox {
width: 100%;
height: 220px;
}
.container .row .col .imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px 5px 0 0;
}
/*show more*/
.btn {
padding: .7rem 2rem;
background: royalblue;
border: none;
color: #FFF;
margin: 20px auto;
display: block;
font-size: 1.3rem;
cursor: pointer;
outline: none;
transition: .3s;
}
.btn:hover {
opacity: .8;
}
.footer-basic{
grid-area: f;
}
#media screen and (max-width: 600px) {
.search{
margin-top: 30px;
border: px;
margin-left: 50px;
}
.box1{
width: 384px;
margin-top: 190px;
height: fit-content;
}
.recent{
display: none;
}
.container {
width: 384px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<meta content="Free HD Movie And Compressed Games Download From a High Speed Server, Try Now , One Click
Direct Download Link Available">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<title>GameMovieMania</title>
</head>
<body>
<header class="header">
<h1 class="heading"><b><i>GameMovieMania</i></b>
</h1> <br>
<div class="topnav" id="myTopnav">
Home
Games
Movies
Contact
About
<a href="javascript:java script/code.js;" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="search">
<h3>Search</h3>
<input type="text" id="myInput" placeholder="Search.." onkeyup="searchOn()">
<button type="button"> Search </button>
</div>
<div class="recent">
<h3>Recent Post</h3>
<div class="post1">
<a href="gta5.html">
<img src="images/gta5.jpeg" id="img1">
<p class="text1">Grand Theft Auto 5 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post2">
<a href="gta4.html">
<img src="images/gta4.jpeg" id="img2">
<p class="text2">Grand Theft Auto 4 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post3">
<a href="gta3.html">
<img src="images/gta3.jpeg" id="img3">
<p class="text3">Grand Theft Auto 3 | Free <br>Download | Highly Compressed </p>
</a>
</div>
</div>
<div class="box1">
<div class="container">
<ul class="row">
<li class="col">
<div class="imgBox">
<img src="images/gta5.jpeg" alt="">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 5 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/nowayhome.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Spiderman No Way Home | Full Movie Download Hindi |
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta4.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 4 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/shershaah.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Shershaah Full movie download HD
</h2>
</div>
</li>
<li class="col">
<a href="sooryavanshi.html">
<div class="imgBox">
<img src="images/sooryavanshi.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Sooryavanshi Full Movie Download HD
</h2>
</div>
</a>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta3.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 3 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
</ul>
<button class="btn">Load More</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(".col").slice(0, 4).show()
$(".btn").on("click", function() {
$(".col:hidden").slice(0, 4).slideDown()
if ($(".col:hidden").length == 0) {
$(".btn").fadeOut('slow')
}
})
function searchOn() {
let input = document.getElementById('myInput').value
input = input.toLowerCase();
let x = document.getElementsByClassName('col');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display = "none";
} else {
x[i].style.display = "list-item";
}
}
}
</script>
</div>
<div class="footer-basic">
<footer>
<div class="social">
<a href="#">
<i class="icon ion-social-instagram"></i>
</p>
<a href="#">
<i class="icon ion-social-snapchat"></i>
</a>
<a href="#">
<i class="icon ion-social-twitter"></i>
</a>
<a href="#">
<i class="icon ion-social-facebook"></i>
</a>
</div>
<ul class="list-inline">
<li class="list-inline-item">Home</li>
<li class="list-inline-item">About</li>
<li class="list-inline-item">Contact</li>
<li class="list-inline-item">Privacy Policies</li>
<li class="list-inline-item">Terms And Conditions</li>
</ul>
<p class="copyright">GameMovieMania Corp. © 2022</p>
</footer>
</div>
</body>
</html>
You can use the CSS overflow property.
.bhavya {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
While I hover Div tag, Another Div tag will appear in front of the prev Div. When i didn't put any words, it works. but when i put h3 tag, the div goes down.
here is the HTML
<div id="content">
<h1 class="head-content">Biscuits</h1>
<div class="line"></div>
<a href="#">
<div class="list-content">
<div class="detail-content">
<h3>Biscuits 1</h3>
<p>Price: IDR 12000</p>
</div>
</div>
</a>
<a href="#">
<div class="list-content">
<div class="detail-content">
</div>
</div>
</a>
<a href="#">
<div class="list-content">
<div class="detail-content">
</div>
</div>
</a>
</div>
here is CSS
#content{
width:50%;
}
.line{
border-top: 5px solid black;
}
.list-content{
display:inline-block;
width:25%;
height:200px;
background-color: black;
margin-top: 10px;
}
.detail-content{
display: none;
}
.list-content:hover .detail-content{
display: block;
width:100%;
height:75%;
background-color: rgba(255,255,255,0.6);
}
thank you before
Update below css part
.list-content:hover .detail-content {
display: table;
width: 100%;
height: 75%;
background-color: rgba(255, 255, 255, 0.6);
}
#content {
width: 50%;
}
.line {
border-top: 5px solid black;
}
.list-content {
display: inline-block;
width: 25%;
height: 200px;
background-color: black;
margin-top: 10px;
}
.detail-content {
display: none;
}
.list-content:hover .detail-content {
display: table;
width: 100%;
height: 75%;
background-color: rgba(255, 255, 255, 0.6);
}
<div id="content">
<h1 class="head-content">Biscuits</h1>
<div class="line"></div>
<a href="#">
<div class="list-content">
<div class="detail-content">
<h3>Biscuits 1</h3>
<p>Price: IDR 12000</p>
</div>
</div>
</a>
<a href="#">
<div class="list-content">
<div class="detail-content">
</div>
</div>
</a>
<a href="#">
<div class="list-content">
<div class="detail-content">
</div>
</div>
</a>
</div>
#James Please find following code. I hope you are expecting the same. Just replaced "display:inline-block;" with "float:left;" and took class "list-content" in anchor tag itself.
#content{
width:50%;
}
.line{
border-top: 5px solid black;
}
.list-content{
float:left;
width:25%;
height:200px;
background-color: black;
margin-top: 10px;
margin-right:10px;
}
.detail-content{
display: none;
}
.list-content:hover .detail-content{
display: block;
width:100%;
height:75%;
background-color: rgba(255,255,255,0.6);
}
.clearfix{
clear:both;
}
<div id="content">
<h1 class="head-content">Biscuits</h1>
<div class="line"></div>
<div class="clearfix">
<a href="#" class="list-content">
<div class="detail-content">
<h3>Biscuits 1</h3>
<p>Price: IDR 12000</p>
</div>
</a>
<a href="#" class="list-content">
<div class="detail-content">
</div>
</a>
<a href="#" class="list-content">
<div class="detail-content">
</div>
</a>
</div>
</div>
Because the .list-content items are inline blocks, when you add a text content you have to vertically align them. Add vertical-align: top to .list-content:
.list-content {
display: inline-block;
width: 25%;
height: 200px;
background-color: black;
margin-top: 10px;
vertical-align: top;
}
And remove the top margin from :
h3 {
margin-top: 0;
}
{
width: 50%;
}
.line {
border-top: 5px solid black;
}
.list-content {
display: inline-block;
width: 25%;
height: 200px;
background-color: black;
margin-top: 10px;
vertical-align: top;
}
.detail-content {
display: none;
width: 100%;
height: 75%;
background-color: rgba(255, 255, 255, 0.6);
}
.list-content:hover .detail-content {
display: block;
}
h3 {
margin-top: 0;
}
<div id="content">
<h1 class="head-content">Biscuits</h1>
<div class="line"></div>
<a href="#">
<div class="list-content">
<div class="detail-content">
<h3>Biscuits 1</h3>
<p>Price: IDR 12000</p>
</div>
</div>
</a>
<a href="#">
<div class="list-content">
<div class="detail-content">
</div>
</div>
</a>
<a href="#">
<div class="list-content">
<div class="detail-content">
</div>
</div>
</a>
</div>
I got 2 main div that i'm trying to make appear on the same line. I'm struggling with the CSS to get what I want.
First div is a kind of menu, displaying categories. I can have more or less of them (should be dynamic). Second div is displaying main buttons/shortcuts and is static.
Goal:
both div on same line
second div (button-container) taking 25% of the page on the right
first div (category-container) taking whatever is left, on the left of the page. Overflow hidden, size of each indivual cells will be adjusted with javascript so everything can fit.
section.home {
white-space: nowrap;
}
section.home > div.category-container {
width: 75%;
overflow: hidden;
display: inline;
}
section.home > div.buttons-container {
width: 25%;
height: 300px;
display: inline-block;
background-color: #EEEEEE;
}
section.home > div.category-container > ul > li {
padding-right: 15px;
padding-left: 15px;
padding-bottom: 15px;
display: inline-block;
}
div.category {
width: 200px;
height: 300px;
text-align: center;
box-shadow: 0 3px 5px #aaa;
background: White none repeat scroll 0 0;
border: 1px solid #ccc;
overflow: hidden;
}
div.category > div.category-title {
padding: 5px;
background-color: #EEEEEE;
color: rgb(254, 107, 3);
font-weight: bold;
}
div.category > a > img {
width: 200px;
}
div.category_content {
padding-top: 10px;
padding-bottom: 10px;
}
<section class="home">
<div class="category-container">
<ul>
<li>
<div class="category">
<div class="category-title">
<span class="font_16">Title 1</span>
</div>
<a href="#">
<img src="#" />
</a>
<div class="category-content">
sutcategory1
<br/>subcategory2
<br/>subcategory 3
</div>
</div>
</li>
<li>
<div class="category">
<div class="category-title">
<span class="font_16">Title 2</span>
</div>
<a href="#">
<img src="#" />
</a>
<div class="category-content">
sutcategory1
<br/>subcategory2
<br/>subcategory 3
</div>
</div>
</li>
<li>
<div class="category">
<div class="category-title">
<span class="font_16">Title 3</span>
</div>
<a href="#">
<img src="#" />
</a>
<div class="category-content">
sutcategory1
<br/>subcategory2
<br/>subcategory 3
</div>
</div>
</li>
</ul>
</div>
<div class="buttons-container">
Buttons container
</div>
</section>
By adding float: left; to the .category-container you are able to format the div's side-by-side.
section.home>div.category-container {
width: 75%;
overflow: hidden;
display: inline;
float: left; /* Float left is what you need */
}
I've updated your HTML & CSS with this edit:
section.home {
white-space: nowrap;
}
section.home > div.category-container {
width: 75%;
overflow: hidden;
display: inline;
float: left;
}
section.home > div.buttons-container {
width: 25%;
height: 300px;
display: inline-block;
background-color: #EEEEEE;
}
section.home > div.category-container > ul > li {
padding-right: 15px;
padding-left: 15px;
padding-bottom: 15px;
display: inline-block;
}
div.category {
width: 200px;
height: 300px;
text-align: center;
box-shadow: 0 3px 5px #aaa;
background: White none repeat scroll 0 0;
border: 1px solid #ccc;
overflow: hidden;
}
div.category > div.category-title {
padding: 5px;
background-color: #EEEEEE;
color: rgb(254, 107, 3);
font-weight: bold;
}
div.category > a > img {
width: 200px;
}
div.category_content {
padding-top: 10px;
padding-bottom: 10px;
}
<section class="home">
<div class="category-container">
<ul>
<li>
<div class="category">
<div class="category-title">
<span class="font_16">Title 1</span>
</div>
<a href="#">
<img src="#" />
</a>
<div class="category-content">
sutcategory1
<br/>subcategory2
<br/>subcategory 3
</div>
</div>
</li>
<li>
<div class="category">
<div class="category-title">
<span class="font_16">Title 2</span>
</div>
<a href="#">
<img src="#" />
</a>
<div class="category-content">
sutcategory1
<br/>subcategory2
<br/>subcategory 3
</div>
</div>
</li>
<li>
<div class="category">
<div class="category-title">
<span class="font_16">Title 3</span>
</div>
<a href="#">
<img src="#" />
</a>
<div class="category-content">
sutcategory1
<br/>subcategory2
<br/>subcategory 3
</div>
</div>
</li>
</ul>
</div>
<div class="buttons-container">
Buttons container
</div>
</section>
The problem is your ul, setting it to inline-block does the trick.
It crashed for small windows, because .category has a fixed width.
section.home > div.category-container UL {
display: inline-block;
}
section.home {
white-space:nowrap;
}
section.home > div.category-container {
width:70%;
overflow:hidden;
display:inline;
}
section.home > div.category-container UL {
display: inline-block;
}
section.home > div.buttons-container {
width:25%;
height:300px;
display:inline;
background-color:#EEEEEE;
}
section.home > div.category-container > ul > li {
padding-right:15px;
padding-left:15px;
padding-bottom:15px;
display:inline-block;
}
div.category {
width:200px;
height:300px;
text-align:center;
box-shadow:0 3px 5px #aaa;
background:White none repeat scroll 0 0;
border:1px solid #ccc;
overflow:hidden;
}
div.category > div.category-title {
padding:5px;
background-color:#EEEEEE;
color:rgb(254,107,3);
font-weight:bold;
}
div.category > a > img {
width:200px;
}
div.category_content {
padding-top:10px;
padding-bottom:10px;
}
<section class="home">
<div class="category-container">
<ul>
<li>
<div class="category">
<div class="category-title">
<span class="font_16">Title 1</span>
</div>
<a href="#">
<img src="#" />
</a>
<div class="category-content">
sutcategory1<br/>
subcategory2<br/>
subcategory 3
</div>
</div>
</li>
<li>
<div class="category">
<div class="category-title">
<span class="font_16">Title 2</span>
</div>
<a href="#">
<img src="#" />
</a>
<div class="category-content">
sutcategory1<br/>
subcategory2<br/>
subcategory 3
</div>
</div>
</li>
<li>
<div class="category">
<div class="category-title">
<span class="font_16">Title 3</span>
</div>
<a href="#">
<img src="#" />
</a>
<div class="category-content">
sutcategory1<br/>
subcategory2<br/>
subcategory 3
</div>
</div>
</li>
</ul>
</div>
<div class="buttons-container">
Buttons container
</div>
</section>
I wanted to create a centered social bar, here the code:
HTML&CSS:
.social-detail {
color:#fff;
font-family: ProximaNovabold;
}
.icon-social {
height: 50px;
width: 208px;
background: url(../../images/contact.png) center center no-repeat;
float: left;
}
#social {
padding: 0px 0px 2px 0px;
float: center;
}
#social li {
height: 42px;
padding: 2px 0px;
float: left;
}
#social .social-icon {
float: left;
cursor: pointer;
}
.social-info {
font-size: 14px;
color: #fff;
line-height: 36px;
padding-left: 50px;
padding-right: 10px;
width: 198px;
text-align: left;
font-family: ProximaNovabold;
}
<div class="social">
<ul id="social">
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/phone.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">+123 456 789</div>
</div>
</li>
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/bbm.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">1A2B3C4D</div>
</div>
</li>
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/yahoo.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">rakensu</div>
</div>
</li>
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/skypee.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">rakensu</div>
</div>
</li>
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/facebook.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">rakensu</div>
</div>
</li>
</ul>
</div>
and here the result:
I think you can solve giving a fixed width, padding: 0 and margin: 0 auto
ul#social {
width: 1000px;
padding: 0;
margin: 0 auto
}
you can change the width to fit the icons...
delete the float: center property, it doesn't exist...
Wrap your icons in a div thats is not affected by your background image:
<div class="social">
<div id="centeringdiv">
<ul id="social">
</ul>
</div>
</div>
and set that new div to "center"
#centeringdiv {
margin: 0 auto;
}