I got problem with centering the div #offer within the section .tight. I don't want to use position: absolute; because of possibility of correct displaying site in 1024px width screens.
Here's the HTML:
<section class="main">
<section class="tight">
<div id="offers">
<article class="offer">
<div id="offer_stats"></div>
text
</article>
<article class="offer">
<div id="offer_comp"></div>
text
</article>
<article class="offer last">
<div id="offer_time"></div>
text
</article>
</div>
</section>
</section>
And the CSS:
section.main {
min-width: 880px;
max-width: 1200px;
margin: 0 auto;
}
section.tight {
width: 100%;
margin: 0 auto;
float: left;
}
#offers {
float: left;
padding-bottom: 100px;
text-align: center;
}
article.offer {
float: left;
min-height: 178px;
width: 260px;
color: #59535e;
padding-right: 50px;
}
article.offer.last {
padding-right: 0;
}
article.offer div {
height: 178px;
}
#offer_stats {
background: url("../images/offer_stats.png") no-repeat;
}
#offer_comp {
background: url("../images/offer_comp.png") no-repeat;
}
#offer_time {
background: url("../images/offer_time.png") no-repeat;
}
The printscreen:
Any suggestions?
section.main {
width: 880px;
max-width: 1200px;
margin: 0 auto;
}
First, i suggest you to remove float: left; from #offers
#offers {
padding-bottom: 100px;
text-align: center;
}
Second, i suggest you to use display: inline-block; instead of float: left; in article.offer
article.offer {
display: inline-block;
min-height: 178px;
width: 260px;
color: #59535e;
padding-right: 50px;
}
See this jsfiddle
Related
So my problem is that the parent has some width and if the screen cant fit everything the children (floated left) go one under the other (looks awesome as well) so I want them when they go one under the other to be centered in the parent.
Here is my code. I tried inline-block and it didn't help and so on
.mainpage-articles {
float:left;
width: 60%;
}
.mainpage-article {
width: calc(800px + 8%);
margin-left: auto;
margin-right: auto;
}
.mainpage-article .thumbnail {
position: relative;
height: 200px;
width: 400px;
margin-left: auto;
margin-right: auto;
padding: 2%;
float: left;
}
.mainpage-article .thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.mainpage-article .article {
height: 200px;
width: 400px;
margin-left: auto;
margin-right: auto;
padding: 2%;
float: left;
}
.mainpage-article .article h1 {
height: 60px;
}
.mainpage-article .article p {
height: 120px;
}
You're probably wanting to learn media queries, to respond to the user's screen. Am I right? If it's that, take a look here: https://codepen.io/giovannipds/pen/BwqyLW
This is what you want to learn:
#media (max-width: 1500px) {
.mainpage-articles {
text-align: center;
}
}
This code align text things to the center when the user window's is at max 1500px, above that it doesn't. There are many ways to apply media queries. I recommend you to watch this to learn it a little better.
Full code of the example above:
<style>
.mainpage-articles {
background-color: #eee;
float: left;
width: 60%;
}
.mainpage-article {
background-color: cyan;
width: calc(800px + 8%);
margin-left: auto;
margin-right: auto;
}
.mainpage-article .thumbnail {
background-color: yellow;
position: relative;
height: 200px;
width: 400px;
margin-left: auto;
margin-right: auto;
padding: 2%;
float: left;
}
.mainpage-article .thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.mainpage-article .article {
background-color: #ccc;
height: 200px;
width: 400px;
margin-left: auto;
margin-right: auto;
padding: 2%;
float: left;
}
.mainpage-article .article h1 {
height: 60px;
}
.mainpage-article .article p {
height: 120px;
}
#media (max-width: 1500px) {
.mainpage-articles {
text-align: center;
}
}
</style>
<div class="mainpage-articles">
<div class="mainpage-article">
<div class="thumbnail">
<img src="//lorempixel.com/400/200" alt="">
</div>
<div class="article">
<h1>Lorem ipsum</h1>
<p>Dolor sit amet.</p>
</div>
</div>
</div>
There's an example here with Bootstrap 4 too:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
.parent {
background-color: yellow;
}
.smth-else {
background-color: cyan;
}
.children {
margin: 75px !important;
}
.children [class^=col-] {
border: 1px solid red;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="parent col">
<div class="children row">
<div class="col-lg-6">
Children col 1
</div>
<div class="col-lg-6">
Children col 2
</div>
</div>
</div>
<div class="smth-else col">
Smth else
</div>
</div>
</div>
Your code is not so pretty, you should adapt them to use media queries better.
So I have a silly question, how do I get my divs on the right side? I have main content but I need to set up four divs on the right side. It looks like this and I need to add div1 - 4. Am I supposed to add width:100%; float: left in .main_container?
Question #2 - I would like to group main_info1 - 3 under one div like main so that I could use .main in css with max-width: 900px; overflow: hidden; margin-left: 20px; attributes for all divs without the need for repeating but when I do that main_info2 jumps up and ignores main_info1 lists. Thanks.
HTML:
<div class="main_container">
<div class="title_container">
<h1>Title</h1>
</div>
<aside>
<div class="small_blocks">
<div class="block1">
<span>Text</span>
</div>
<div class="block2">
<span>Text</span>
</div>
</div>
</aside>
<div class="content clearfix">
<div class="image1">
<img src="img/img1.jpg">
</div>
<div class="image2">
<img src="img/img2.jpg">
</div>
</div>
<div class="main_info">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="main_info2 clearfix">
<h2>Title</h2>
<ul>
<li>
<p>Text</p>
</li>
</ul>
</div>
<div class="main_info3 clearfix">
<h2>Title</h2>
<p>Text</p>
</div>
</div>
CSS:
.main_container {
width: 1360px;
margin: 0 auto;
background: url("../img/bg.jpg") left top no-repeat;
background-color: #0c0334;
}
.title_container {
display: table;
}
.title_container h1 {
float: left;
display: table-cell;
vertical-align: top;
margin-top: 50px;
margin-left: 20px;
line-height: 66px;
}
.small_blocks {
min-width: 900px;
overflow: hidden;
}
.small_blocks div {
height: 55px;
margin-top: 30px;
}
.small_blocks .block1 {
float: left;
margin-left: 20px;
background: #390b5d;
width: 595px;
line-height: 52px;
}
.small_blocks .block1 span {
font-size: 30px;
padding-left: 20px;
font-weight: 100;
}
.small_blocks .block2 {
float: left;
width: 285px;
background: #e26c34;
padding-left: 20px;
line-height: 52px;
vertical-align: middle;
}
.small_blocks .block2 span {
font-size: 30px;
padding-left: 10px;
font-weight: 100;
vertical-align: middle;
display: inline-block;
}
.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.content {
width: 900px;
height: 377px;
overflow: hidden;
margin: 20px 0 0 20px;
}
.content .image1 {
float: left;
width: 268px;
}
.content .image2 {
float: left;
margin-left: 10px;
width:100%;
max-width: 622px;
}
.main_info {
max-width: 900px;
overflow: hidden;
margin-top: 60px;
margin-left: 20px;
}
.main_info h2 {
height: 34px;
border-bottom: 1px solid #390b5d;
}
.main_info2 {
max-width: 900px;
overflow: hidden;
margin: 60px 0px 0px 20px;
background: #110321;
}
.main_info2 h2 {
background: #390b5d;
min-height: 55px;
width: 880px;
padding-left: 20px;
height: 34px;
color: #fff;
line-height: 52px;
}
.main_info3 {
max-width: 900px;
overflow: hidden;
margin: 60px 0px 0px 20px;
background: #390b5d;
}
.main_info3 h2 {
min-height: 55px;
width: 880px;
padding-left: 20px;
height: 34px;
color: #fff;
line-height: 52px;
}
I think you are a newbie. You should work hard to master in HTML and CSS. :)
However, here is a solution. Please inspect them closely. Hopefully you will get your answers.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
display: block;
}
.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.wrapper {
min-width: 1000px;
max-width: 1360px;
margin: 0 auto;
padding: 0 20px;
}
.title_container {
padding-top: 50px 0 30px;
}
.title_container h1 {
line-height: 66px;
}
.small_blocks {
height: 55px;
overflow: hidden;
margin-bottom: 20px;
font-size: 30px;
font-weight: 100;
line-height: 52px;
color: #fff;
}
.small_blocks > div {
height: inherit;
float: left;
padding-left: 20px;
}
.small_blocks .block1 {
background: #390b5d;
width: 66.111111%;
}
.small_blocks .block2 {
width: 33.888889%;
background: #e26c34;
}
.content {
/*height: 377px;*/
overflow: hidden;
margin-bottom: 60px;
}
.content > div img {
width: 100%;
height: auto;
}
.content .image1 {
float: left;
width: 29.777778%;
}
.content .image2 {
float: left;
width: 70.222222%;
padding-left: 10px;
}
.main_container {
width: 68.181818%;
float: left;
}
.main_info {
margin-bottom: 60px;
background: #d7d7d7;
}
.main_info .head {
padding-left: 20px;
background: #000;
color: #fff;
}
.main_info h2 {
height: 34px;
line-height: 34px;
}
.main_info .body {
padding: 20px;
}
.sidebar {
width: 31.818182%;
padding-left: 20px;
float: right;
}
.sidebar_block {
min-height: 150px;
margin-bottom: 20px;
padding: 20px;
background: #000;
color: #fff;
}
<div class="wrapper">
<header class="title_container">
<h1>Title</h1>
</header>
<main class="main_container">
<div class="small_blocks">
<div class="block1">
<span>Block 1</span>
</div>
<div class="block2">
<span>Block 2</span>
</div>
</div>
<div class="content clearfix">
<div class="image1">
<img src="http://dummyimage.com/268x377/000/fff.jpg&text=image1">
</div>
<div class="image2">
<img src="http://dummyimage.com/622x377/000/fff.jpg&text=image2">
</div>
</div>
<section class="main_info">
<div class="head">
<h2>Main Info-1 h2</h2>
</div>
<div class="body">
Main info 1
</div>
</section>
<section class="main_info">
<div class="head">
<h2>Main Info-2 h2</h2>
</div>
<div class="body">
Main info 2
</div>
</section>
<section class="main_info">
<div class="head">
<h2>Main Info-3 h2</h2>
</div>
<div class="body">
Main info 3
</div>
</section>
</main>
<aside class="sidebar">
<section class="sidebar_block">Div 1</section>
<section class="sidebar_block">Div 2</section>
<section class="sidebar_block">Div 3</section>
<section class="sidebar_block">Div 4</section>
</aside>
</div>
Regarding the questions in your comment:
Actually float works. As you use a fixed width width: 420px;, probably there has no enough space for the second ul to accommodate it in a single row. Use width: 50%; or below and see the changes. Or, you can check it in a wider screen, like, 1360px resolution.
Yes, for smaller devices.
This is a basic example. I used percentage values for the column width. So columns may become very narrower in smaller devices. To prevent that, I used min-width: 1000px for .wrapper. This will prevent narrower column width, but cause a horizontal scroll-bar in smaller devices.
I've got a problem with DIV-containers.
.inner-teaser {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
.bg-blue {
background: blue;
}
.teaser-image {
background-position: center;
background-size: 350px;
width: 250px;
height: 250px;
border-radius: 150px;
}
.image-left {
float: left;
margin-right: 50px;
}
<div class="outer-teaser bg-blue">
<div class="inner-teaser">
<div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">Image</div>
<div class="teaser-text">Lorem ipsum dolor...</div>
</div>
</div>
The inner-teaser should have the height from the teaser-image (250px) + 20px padding. But inner-teaser has only a height of 40px (2 * 20px padding).
Add overflow: hidden to .inner-teaser to force it to take its floating-children height:
.inner-teaser {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
overflow: hidden;
}
.bg-blue {
background: blue;
}
.teaser-image {
background-position: center;
background-size: 350px;
width: 250px;
height: 250px;
border-radius: 150px;
}
.image-left {
float: left;
margin-right: 50px;
}
<div class="outer-teaser bg-blue">
<div class="inner-teaser">
<div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">Image</div>
<div class="teaser-text">Lorem ipsum dolor...</div>
</div>
</div>
You can also use { display: inline-block } for .inner-teaser div.
.inner-teaser {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
display: inline-block;
}
.bg-blue {
background: blue;
}
.teaser-image {
background-position: center;
background-size: 350px;
width: 250px;
height: 250px;
border-radius: 150px;
}
.image-left {
float: left;
margin-right: 50px;
}
<div class="outer-teaser bg-blue">
<div class="inner-teaser">
<div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">Image</div>
<div class="teaser-text">Lorem ipsum dolor...</div>
</div>
</div>
just add after class class="teaser-text" see demo :demo
.inner-teaser {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
.bg-blue {
background: blue;
}
.teaser-image {
background-position: center;
background-size: 350px;
width: 250px;
height: 250px;
border-radius: 150px;
}
.image-left {
float: left;
margin-right: 50px;
}
<div class="outer-teaser bg-blue">
<div class="inner-teaser">
<div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">Image</div>
<div class="teaser-text">Lorem ipsum dolor...</div>
<div style="clear:both"></div>
</div>
</div>
v style="clear:both">
I created a link to an ID that should send the user to a div located somewhere at the top of the same page.
when clicking this link, it does jump to the #id, but everything inside the containing div of that id, gets truncated.
EDIT:
Ok, here's a fiddle
CSS:
#header {
width: 1080px;
min-height: 80px;
position: relative;
background-color: #badaf6;
margin-left: auto;
margin-right: auto;
}#container {
width: 1080px;
min-height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border-bottom: 0;
overflow: hidden;
background-color: #FDFDFD;
}
#left {
float: left;
width: 700px;
min-height: 700px;
background-color: #fff;
}
#marg {
margin: 11px 20px 10px 18px;
}
#right {
float: left;
width: 380px;
min-height: 700px;
background-color: #fff;
}
#left #box {
margin-top: 0;
margin-left: 0;
background-color: #ECF4FD;
width: 500px;
height: 200px;
}
#left, #middle, #right {
padding-bottom: 999999px;
margin-bottom: -999999px;
}
#space {
margin: 30px 0 40px 4px;
}
HTML:
<body>
<div id="header">
</div>
<div id="container">
<div id="left">
<div id="space">
<div id="box">
</div>
<p><a href="#box">Click</p>
</div>
</div>
<div id="right">
</div>
<br style="clear: left;" />
</div>
</body>
If its okay, you can change your html like this http://jsfiddle.net/xx6jgLsj/1/
<p><a href="#left">Click</p>
I have some questions:
How can I get the nav, conversationList and conversation section expand to the bottom?
If one of these 3 expand their size (e.g. a long text). How can I apply the same size to all 3?
Fiddle Link.
HTML
<header>
Text
</header>
<main>
<nav>
Navigation
</nav>
<section id="contentWrapper">
<section id="contentTitle">
TITLE
</section>
<section id="conversationList">
List
</section>
<section id="conversation">
Conversation
</section>
</section>
</main>
CSS
html, body{
height: 100%;
width: 100%;
margin:0px !important;
}
header{
position: fixed;
top: 0;
height: 60px;
width: 100%;
background-color: #777;
z-index: 1;
}
main{
float: left;
padding-top: 60px;
background-color:black;
bottom:0px;
width:100%;
min-height: calc(100% - 60px);
}
nav{
float: left;
width: 15%;
min-height: 100%;
background-color: green;
}
#contentTitle{
float: left;
width: 98.5%;
height: 35px;;
padding-top: 25px;
padding-left: 1.5%;
background-color: red;
}
#contentWrapper{
float: left;
width: 85%;
min-height: 100%;
}
#pageTitle{
float: left;
width: 100%;
height: 40px;
padding-top: 20px;
padding-left: 3%;
background-color: red;
}
#conversationList{
float: left;
width: 30%;
background-color: white;
}
#conversation{
float: left;
width: 70%;
background-color: yellow;
}
Basic answer is to apply height: 100% to every element you want stretched. You have to remember to give each parent element a height of 100% as well, like #contentWrapper needs height: 100%.
Have a fiddle!
I have completely re-written this for you:
jsBin example!
Have a play with it so that you understand how it works.
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body {
height: 100%;
}
header {
height: 60px;
background: green;
}
main {
display: table;
width: 100%;
height: calc(100% - 60px);
}
nav {
display: table-cell;
width: 60px;
background: green;
}
#contentWrapper {
display: table;
width: 100%;
height: calc(100% - 60px);
}
#contentTitle {
width: 100%;
height: 60px;
background: red;
}
#conversationList {
width: 80px;
float: left;
height: calc(100% - 60px);
background: yellow;
}
#conversation {
float: left;
width: calc(100% - 80px);
height: calc(100% - 60px);
background: pink;
}
HTML
<header>
Text
</header>
<main>
<nav>
Navigation
</nav>
<section id="contentTitle">
TITLE
</section>
<section id="conversationList">
List
</section>
<section id="conversation">
Conversation
</section>
</main>