For most of you this will be a simple question but I'm new to css. My problem is that I have two blocks next to each other with float but text in second object just does not stay in same line. How do I get everything in same line?
What it should look like:
blocks
In reality everything works fine until "Text2" comes or I try to adjust "Logo" padding, then "Text2" moves to next line something like this.
Also how do I get "Text2" next to "Logo"? Right now I only got it working with float:right but I need it closer to the logo. And do I use aside for these elements? Thanks.
Adding js fiddle url for demo: http://www.jsfiddle.net/08rhr7wx/
HTML:
<aside>
<div class="wrapper">
<div class="block1">
<h2>Text1</h2>
</div>
<div class="block2"><img src="img/logo.jpg"></div>
<h2>Text2</h2>
</div>
</aside>
CSS:
.wrapper {
overflow: hidden;
}
.wrapper div {
height: 55px;
margin-top: 20px;
}
.wrapper .block1 {
float: left;
margin-left: 20px;
background: #390b5d;
width: 555px;
}
.wrapper .block1 h2 {
padding-left: 20px;
padding-top: 13px;
}
.wrapper .block2 {
float: left;
width: 325px;
background: #e26c34;
padding-left: 20px;
}
.wrapper .block2 h2 {
float: right;
padding-right: 20px;
}
I moved your "text2" inside the block2 where I guess you want it.
Also, when setting up fixed width like you have, you need to set a min-width on the wrapper to keep those floats in 1 line.
To make the "text2" stay next to your logo, I changed it to display: inline instead of its default display: block.
Note: What you really should try, is to re-structure your code making it more responsive.
.wrapper {
min-width: 1000px;
overflow: hidden;
}
.wrapper div {
height: 55px;
margin-top: 20px;
}
.wrapper .block1 {
float: left;
margin-left: 20px;
background: #390b5d;
width: 555px;
}
.wrapper .block1 h2 {
padding-left: 20px;
}
.wrapper .block2 {
float: left;
width: 325px;
background: #e26c34;
padding-left: 20px;
}
.wrapper .block2 h2 {
display: inline
}
<aside>
<div class="wrapper">
<div class="block1">
<h2>Text1</h2>
</div>
<div class="block2">
<img src="img/logo.jpg">
<h2>Text2</h2>
</div>
</div>
</aside>
As requested, a second sample where some restructure has been made.
.wrapper {
min-width: 1000px;
overflow: hidden;
}
.wrapper div {
height: 55px;
margin-top: 20px;
}
.wrapper .block1 {
float: left;
margin-left: 20px;
background: #390b5d;
width: 555px;
line-height: 55px;
}
.wrapper .block1 span {
font-size: 24px;
padding-left: 20px;
color: white;
}
.wrapper .block2 {
float: left;
width: 325px;
background: #e26c34;
padding-left: 20px;
line-height: 55px;
vertical-align: middle;
}
.wrapper .block2 span {
font-size: 24px;
padding-left: 20px;
vertical-align: middle;
display: inline-block;
}
.wrapper .block2 img {
vertical-align: middle;
display: inline-block;
}
<aside>
<div class="wrapper">
<div class="block1">
<span>Text1</span>
</div>
<div class="block2">
<img src="http://lorempixel.com/30/30/technics/5/"><span>Text2</span>
</div>
</div>
</aside>
Try adding h2 tag inside .block2
<div class="block2"><img src="img/logo.jpg"><h2>Text2</h2></div>
Ref: jsfiddle.net/08rhr7wx/1/
Related
I'm trying to force a div to fit the text inside. No matter what I have tried, there seems to be extra white space. Here is my code:
body {
background-color: #000;
}
.holding {
width: 500px;
background-color: red;
height: 500px;
padding: 40px 100px;
max-width: 400px;
width: fit-content;
}
.childone {
background-color: white;
display: inline;
padding: 20px;
float: left;
clear: both;
}
.clear {
clear: both;
}
.childtwo {
background-color: white;
display: inline-block;
float: left;
padding: 10px;
}
<body>
<div class="holding">
<div class="childone">This is the Title and I really the div to end here with.no.extra.white.space </div>
<div class="clear"></div>
<div class="childtwo">This is the next child div with a bund of stuff.</div>
</div>
</body>
Use word-break: break-all, like:
.childone {
word-break: break-all;
}
Have a look at the snippet below:
body {
background-color: #000;
}
.holding {
width: 500px;
background-color: red;
height: 500px;
padding: 40px 100px;
max-width: 400px;
width: fit-content;
}
.childone {
background-color: white;
display: inline;
padding: 20px;
float: left;
clear: both;
word-break: break-all;
}
.clear {
clear: both;
}
.childtwo {
background-color: white;
display: inline-block;
float: left;
padding: 10px;
}
<body>
<div class="holding">
<div class="childone">This is the Title and I really the div to end here with.no.extra.white.space </div>
<div class="clear"></div>
<div class="childtwo">This is the next child div with a bund of stuff.</div>
</div>
</body>
Hope this helps!
div { width: max-content; }
Support browsers: https://caniuse.com/#search=max-content
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
Or you can use this way (change display attribute):
div { display: table; }
I have divs that i want to wrap to the next line when the browser window gets smaller. I also want margin to be put in between the divs so that there's a gap between them. The problem I'm having is that the margin on the centre divs causes the divs to wrap incorrectly if the browser is set to a specific size. At a certain size you have 2 divs underneath one div. See my screenshot below as an example and this fiddle: http://jsfiddle.net/uhh2jwe2/ (change the width of the window)
This really needs to be dynamic as it will be a framework solution for laying out differently sized divs. The parent div will be fluid similar to the example. Any help would be great
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
You can use media queries to alter the css on smaller screen.
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
#media (max-width: 435px) {
#outer > div {
margin-right:auto;
margin-left:auto;
margin-bottom:15px;
float:none;
}
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
Use Media query like this:
#outer div:last-child {
margin-bottom: 0;
}
#media screen and (max-width:570px) {
.inner1, .inner2, .inner3 {
margin-bottom: 5px;
}
}
#media screen and (max-width:411px) {
.inner1, .inner2, .inner3 {
float: none;
margin: auto;
margin-bottom: 5px;
}
}
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
#outer div:last-child {
margin-bottom: 0;
}
#media screen and (max-width:570px) {
.inner1, .inner2, .inner3 {
margin-bottom: 5px;
}
}
#media screen and (max-width:411px) {
.inner1, .inner2, .inner3 {
float: none;
margin: auto;
margin-bottom: 5px;
}
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
I would recommend a solution that extracts the grid-elements from the content-elements. Therefore you have a lot more control about your layout and you can be more flexible with content you want to place into it.
Use your .inner elements as grid-elements and wrap content inside them into .inner-content
Wrap all inners into a row to get rid of the outer-gutter
Give the .inner elements a percentage-width and a px-max-width. So the elments can take alwyay 33.33% of the avaiable width but never more then 150px.
I added some adjustments for small screens, so the .inner elements wrap below each other and take more then 33.33% of the .outer container width.
Inspect the code: http://jsfiddle.net/uhh2jwe2/5/
* {
box-sizing: border-box;
}
/* flexible outer container */
.outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: hidden;
background-color: red;
}
/* remove outer gutter */
.row {
margin: 0 -10px;
}
/* .inner will take care of the width */
.inner {
width: 33.33%;
max-width: 150px;
float: left;
padding: 0 10px;
}
/* .inner-content take care of the height */
.inner-content {
height: 150px;
color: #fff;
background: blue;
}
#media (max-width: 435px) {
/* this wraps .inner elements below each other and extends width */
.outer .inner {
padding: 10px 0;
width: 100%;
max-width: 100%;
float:none;
}
}
<div class="outer">
<div class="row">
<div class="inner">
<div class="inner-content">1</div>
</div>
<div class="inner">
<div class="inner-content">2</div>
</div>
<div class="inner">
<div class="inner-content">3</div>
</div>
</div>
</div>
I would suggest to use bootstrap's technique for that. Have padding on both sides of your inner elements, and negate it with negative margin on the container.
This will require more markup tough. While .row and .container could be merge on the same element, the background-color would overflow to the left because of the negative margin.
.container {
background-color: green;
width: 510px;
}
.row {
font-size: 0;
margin: 0 -15px;
}
.block {
font-size: 12px;
padding: 0 15px;
display: inline-block;
}
.content {
width: 150px;
height: 150px;
background-color: red;
}
<div class="container">
<div class="row">
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
</div>
</div>
in your example, the first two divs are 170px wide (150+20), and the third is 150px wide because it doesn't have a margin, thats the problem.
avoid #media if you mant it to be fully responsive and not jumping from 4 items a line to 1 item a linefor example.
you can solve your issue by simply adding a margin-right:20 to your last element, but it is better to to like so :
.inner1, .inner2, .inner3{
float: left;
width: 150px;
height: 150px;
margin: 2px 10px; //left & right sides to half of 20px
background-color: blue;
}
because it will split the margin to the two sides, making it more symetrical.
For laying out differently sized divs.
if all your divs can change size but stay equal, it will work, but if the first div is 70 and the 2nd and 3rd are 50, there will always be two divs on the bottom line at some point.
I think I've found the simplest solution to what I'm trying to do without having to use media queries. I simply added the right margin to all fields including the last field rather than adding it to every field except the final field.
I then wrap all the fields in another div and add a minus margin (the same size as the gaps) so that the fields will wrap when they hit the side of the container. Here's a fiddle with the solution: http://jsfiddle.net/rahg1ky3/
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
#inner {
margin-right: -20px;
}
.cont {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
<div id="outer">
<div id = "inner">
<div class="cont">1</div>
<div class="cont">2</div>
<div class="cont">3</div>
</div>
</div>
I have a div element (1200px width) that contains 3 inner divs.
First and last ones have static sizes (150px and 200px). I want the second one to be centered between logo and buttons. The problem is I don't know how to center this div...
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
width: auto;
float: left;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
One approach would be to set the display of the .text element to inline-block (and remove float: left), then add text-align: center to the parent element in order to center it. Since the other elements are floated, text-align won't affect them, and it will only center the inline .text element.
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
text-align: center;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
display: inline-block;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
Alternatively, you could also add margin: auto to the .text element and then set display: flex on the parent element. In doing so, the .text element will be centered horizontally with equal space on each side. In doing so, you don't need to float the elements either (since they are flexbox items).
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
display: flex;
}
.logo {
width: 150px;
height: 50px;
background-color: darkred;
}
.text {
margin: auto;
}
.buttons {
width: 200px;
height: 70px;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
The problem is that you're floating the centre column. Don't.
The proper way to do what you're doing is to put the left and right columns first, then the centre column won't have to float and you can simply use text-align.
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
text-align:center;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="buttons"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
</div>
Try
.text {
width: auto;
float: left;
text-align: center;
}
Trivial with Flexbox:
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
display:flex;
justify-content:space-between;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
background:#c0ffee
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
Here's an (I think) more appropriate solution which centers the entire div and not only the text, using width:calc(100% - 350px);
https://jsfiddle.net/tyvfcbre/1/
.text {
display:inline-block;
width:calc(100% - 350px);
background:lightgrey;
}
Background is there to demonstrate the div position.
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 am trying to make the div tags in my HTML a percent of the size of the parent div, without being too small or too large. What I get when I check the size of the div with this code:
#main {
width: 800px;
height: 800px;
margin: 0 auto;
}
.sidebar {
width: 31%;
margin-right: 1%;
margin-left: 2%;
}
.content {
width: 61%;
margin-right: 2%;
margin-left: 1%;
}
.sidebar, .content {
background: #888;
height: 100%;
float: left;
border-radius: 4px;
color: #FFF;
font-family: Helvetica;
text-align: center;
}
.sidebar_inner, .content_inner {
height: 100%;
width: 100%;
padding: 0%;
font-size: 1em;
background-color: black;
}
<div id="main">
<div class="sidebar">
<div class="sidebar_inner">
<h1>Hello!</h1>
</div>
</div>
<div class="content">
<div class="content_inner">
<h1>Hello again!</h1>
</div>
</div>
</div>
The blue box is the inner div tag. Here is a better picture of the problem
You will need to have units on your width and height such as px, em, rem, %, vh, vw.
See more here at
W3.org
Solution from your example
The problem is h1 margin. Browsers have default style for line heights, margins and font sizes of headings, and so on. However, you can solve your problem by giving margin:0; to the h1 element or use css reset to solve your problem.
h1
{
margin:0;
padding:0;
}
#main {
width: 800px;
height: 800px;
margin: 0 auto;
}
.sidebar {
width: 31%;
margin-right: 1%;
margin-left: 2%;
}
.content {
width: 61%;
margin-right: 2%;
margin-left: 1%;
}
.sidebar, .content {
background: #888;
height: 100%;
float: left;
border-radius: 4px;
color: #FFF;
font-family: Helvetica;
text-align: center;
}
.sidebar_inner, .content_inner {
height: 100%;
width: 100%;
padding: 0%;
font-size: 1em;
background-color: black;
}
h1
{
margin:0;
padding:0;
}
<div id="main">
<div class="sidebar">
<div class="sidebar_inner">
<h1>Hello!</h1>
</div>
</div>
<div class="content">
<div class="content_inner">
<h1>Hello again!</h1>
</div>
</div>
</div>
All the properties of #main require a measurement unit...
#main {
width: 800px
height: 800px;
margin: 0px auto;
}
For you example, px is good.
It's happening because you have a top margin on your H1 tag.