I creating wall and i have problem.
Better to show it in the picture:
Question is: how can I prevent the formation of the gaps?
html
<div id="wrapper">
<div class="shoot">...</div>
<div class="shoot">...</div>
<div class="shoot">...</div>
</div>
css
#wrapper{
width: 769px;
margin: 0 auto;
}
.shoot{
width: 370px;
height: auto;
float: left;
margin: 7px;
}
#wrapper{
width: 769px;
margin: 0 auto;
background-color: red;
}
.shoot{
width: 370px;
height: auto;
float: left;
margin: 7px;
background-color: blue;
}
.clear-div{
clear: both;
}
<div id="wrapper">
<div class="shoot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
<div class="shoot">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tristique id justo ac varius. In massa velit, malesuada nec augue at, consectetur pulvinar dolor.
</div>
<div class="shoot">In massa velit, malesuada nec augue at.</div>
<div class="clear-div"></div>
</div>
One way to do it is to enclose the left part in a div, and set that containing div to have float:left and set the right div to have float:right. If you wanted to put multiple items on the right, you could just enclose all the right divs into a container and set float:right on that. Working example: https://jsfiddle.net/32azzrwb/2/
Related
I'm struggling to align a group of boxes in the center of my webpage when displayed on a computer screen. I'm floating the boxes left but then it's assymetrical with more space on the right. It's currently looking like this:
! https://imgur.com/a/wq0yv6S
I tried a few different alignment properties to the "boxes" and "box" classes but they didn't accomplish anything.
HTML of the section + first box and CSS:
#boxes {
margin-top: 20px;
}
#boxes .box {
float: left;
width: 20%;
padding: 10px;
text-align: center;
align-self: center;
justify-content: space-around;
}
#boxes .box img {
width: 200px;
}
<section id="boxes">
<div class="container">
<div class="box">
<img src="./img/foto0.jpg">
<h2>Pessoa Fisica</h2>
<p>Cuidamos da sua declaracao de imposto de renda</p>
</div>
I'd like to have those boxes positioned symmetrically.
You can use display: grid;
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1em;
}
.grid-item {
background: #F7F7F7;
padding: 1em;
text-align: center;
}
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
You could use flexbox,
it's very easy to start with,
you need to implement this CSS code to the parent container which you need its children to be aligned in someway
.container{
display: flex;
justify-content: center;
align-items: center;
}
<section id="boxes">
<div class="container">
<div class="box">
<img src="./img/foto0.jpg">
<h2>Pessoa Fisica</h2>
<p>Cuidamos da sua declaracao de imposto de renda</p>
</div>
What you're trying to achieve is not too hard with flexbox. See the following demo for an example. If you have any questions please ask :).
Note: The .site div is not needed but added for reference.
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
max-width: 960px;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.box {
position: relative;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.site {
border: 1px solid red;
}
img {
max-width: 100%;
height: auto;
}
<div class="site">
<div class="container">
<div class="row">
<div class="box">
<img src="https://dummyimage.com/300x200/f9f9f9/aaa" alt="">
<h2>Title #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui purus, porta sit amet elit ut, pretium dapibus ante. Suspendisse non pharetra odio. Mauris ac placerat libero.</p>
</div>
<div class="box">
<img src="https://dummyimage.com/300x200/f9f9f9/aaa" alt="">
<h2>Title #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui purus, porta sit amet elit ut, pretium dapibus ante. Suspendisse non pharetra odio. Mauris ac placerat libero.</p>
</div>
<div class="box">
<img src="https://dummyimage.com/300x200/f9f9f9/aaa" alt="">
<h2>Title #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui purus, porta sit amet elit ut, pretium dapibus ante. Suspendisse non pharetra odio. Mauris ac placerat libero.</p>
</div>
<div class="box">
<img src="https://dummyimage.com/300x200/f9f9f9/aaa" alt="">
<h2>Title #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui purus, porta sit amet elit ut, pretium dapibus ante. Suspendisse non pharetra odio. Mauris ac placerat libero.</p>
</div>
</div>
</div>
</div>
Just practicing around with div positioning. In this code, the green colored child div (the last fourth one from left), whenever I try to increase/decrease its height in %, there is no effect. However, when I try to increase/decrease its height in pixels the div expands/contracts accordingly. Why is that? I am talking about .child4 { }
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
}
.parent {
background-color: rgba(0,0,0,1);
height: 100%;
width: 100%;
position: absolute;
}
.child1 {
background-color: rgba(153,153,153,1);
height: 200%;
width: 25%;
margin-right: 2%;
margin-left: 0%;
display: block;
/* [disabled]margin-bottom: 2%; */
float: left;
position: relative;
}
.child2 {
background-color: rgba(255,0,0,1);
height: auto;
width: 25%;
margin-left: 0%;
display: block;
float: left;
position: relative;
top: 0%;
margin-top: 0%;
}
.child3 {
height: auto;
width: 25%;
background-color: rgba(0,0,255,1);
float: left;
}
.child4 {
height: 50%;
width: 20%;
background-color: rgba(0,255,0,1);
float: left;
position: relative;
top: 0%;
}
----------
<div class="parent">
<div class="child1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis eeeeeeeeeeeeeeeeeeeeeeeee
</div>
<div class="child2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis
</div>
<div class="child3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis
dolor sed euismod. Fusce id tellus est. Nam eu rutrum urna. Donec mattis a
libero faucibus euismod. Suspendisse iaculis placerat sapien in ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula quis
</div>
<div class="child4">
kdkldkldkdkld
</div>
</div>
You set the height to 50% but 50% of what? What value is that? It's always the value of the parent. In this case .parent.
So what is the value of .parent? You have it set to auto which leads to what value in its height for .parent? Zero.
What is 50% of zero?
Get it? Good.
So set .parent to a height of, say, 300px. Then see what you get.
It's not working, because the parent doesn't have any height.
You can't take 25% of auto, but you can take 25% of 700px for example. The parent height should be in px to be able to make the child height in %.
Edit :
Now that you added height 100% to parent, it's looking weird, because it take 100% of the snippet container.
Have you tried setting the width of the .parent to a fixed size e.g. 500px? That way you can make the height a percentage based off of the width. There does need to be some fixed attribute to base the percentage off of. This works the same for width % so if you set a fixed height you can use % on the width
I don't understand very well what you want, but I saw that you need add some fix on your CSS code to show the .parent background because you are using float:left on .child. Maybe this solve your problem. This is the fix code:
.parent:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both !important;
height: 0;
}
I am struggling to clear 3 div in the correct manner I can do it by adding padding to the bottom of the wrapping div but that really isn't practical.
Demo of the problem
What do you think the best treatment is for this?
HTML
<section class="audience">
<div class="container">
<div class="audience_col1">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a consequat ipsum. Praesent a pellentesque nibh, vitae blandit leo. Fusce arcu orci, eleifend vel nunc vel, pellentesque eleifend lorem.</p>
</div>
<div class="audience_col2">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a consequat ipsum. Praesent a pellentesque nibh, vitae blandit leo. Fusce arcu orci, eleifend vel nunc vel, pellentesque eleifend lorem.</p>
</div>
<div class="audience_col3">
<h1>title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a consequat ipsum. Praesent a pellentesque nibh, vitae blandit leo. Fusce arcu orci, eleifend vel nunc vel, pellentesque eleifend lorem.</p>
</div>
</div>
</section>
CSS
.audience{
width: 100%;
background-color: #f6f5fa;
height: auto;
overflow:auto;
text-align:center;
padding: 20px 0 20px 0;
}
.audience_col1{
width: 33.33%;
height: 100px;
float: left;
box-sizing:border-box;
padding: 20px;
}
.audience_col2{
width: 33.33%;
height: 100px;
float: left;
box-sizing:border-box;
padding: 20px;
}
.audience_col3{
width: 33.33%;
height: 100px;
float: left;
box-sizing:border-box;
padding: 20px;
}
If I'm right in thinking what you're trying to accomplish, why not display the div elements inline?
Demo Fiddle
CSS
.audience {
width: 100%;
background-color: #f6f5fa;
text-align:center;
padding: 20px 0 20px 0;
font-size:0; /* <--- trick to prevent inline 'spacing' of multiline HTML */
}
.audience_col1, .audience_col2, .audience_col3 {
width: 33.33%;
height: 100px;
display:inline-block;
box-sizing:border-box;
padding: 20px;
font-size:14px; /* <--- revert font-size */
}
.audience{
display:block;
}
.audience_col1,
.audience_col2,
.audience_col3{
display:inline-block;
}
This is the CSS you should use if you want to work with float concept, else you can change the code and move ahead with the display: inline-block concept as shown on the other answer :-
Demo Fiddle
.audience{
background-color: #f6f5fa;
}
.container {
overflow: hidden;
text-align: center;
}
.audience_col1, .audience_col2, .audience_col3 {
width: 33.33%;
float: left;
box-sizing:border-box;
padding: 20px;
}
Like the title says. These adjacent divs have the be the same height, resize with the browser window, and have these little icons absolutely positioned on the corners. This solution, using display:table-cell, works in all browsers except Firefox (where the icons end up at the bottom of the page). I understand this is a long-standing FF bug, but I can't find a better way to keep these divs the same height.
<div class="contain">
<div class="text-box">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus ligula nibh, a pulvinar nulla rutrum a.</span>
</div>
<div class="text-box">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus ligula nibh, a pulvinar nulla rutrum a.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus ligula nibh, a pulvinar nulla rutrum a.</span>
</div>
</div>
div.contain {
display: table;
margin: 0 auto;
min-width: 200px;
max-width: 1000px;
border-spacing: 20px;
}
.text-box {
display: table-cell;
position: relative;
width: 25%;
background: red;
}
.text-box::before {
display: block;
width: 20px;
height: 20px;
position: absolute;
bottom: 0;
right: 0;
margin-bottom: -10px;
margin-right: -10px;
background: blue;
content: "";
}
http://jsfiddle.net/d24U6/1/
Use CSS Flexbox.
jsfiddle
Code:
<html>
<head>
<title>Equal Height Demo</title>
<style>
.container,
.content,
.icon { display: flex; }
.content { position: relative; margin-right: 20px; width: 30%; background: #fcc; }
.content:nth-child(2) { background: #cfc; }
.icon { position: absolute; right: -10px; bottom: -10px; width: 20px; height: 20px; background: #ccf; }
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<div class="icon"></div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<div class="icon"></div>
</div>
</div>
</body>
</html>
I have two divs inside a containers floating to the left. In some of the containers the left div is missing, so I want to do it so that if the left div is missing then the right div should expand to the full width of container.
In my code below, I have specified the width of the right div and because of this if the left div is missing, it does not fill the whole container.
Here's the code:
HTML:
<div class="box">
<div class="left"><img src="http://i50.tinypic.com/2cxj31z.jpg" ></div>
<div class="right">... content...</div>
</div>
CSS:
.box{
width: 300px;
border: 1px solid red;
margin: 0 auto;
overflow: hidden;
}
.left{
width: 80px;
margin-right: 10px;
float: left;
}
.right{
float: left;
width: 210px;
}
JSFiddle:
http://jsfiddle.net/DMFz8/
You can use an adjacent selector, so that .right becomes floated only if there's a .left next to it.
Replace the .right selector and rule with this:
.left + .right{
float: right;
width: 210px;
}
Demo
I don't know what ypu want exactly but try this maybe helpful
<div class="box">
<div class="left"><img src="http://i50.tinypic.com/2cxj31z.jpg" ></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget ligula sapien, sed tempor felis. Vivamus eget bibendum augue. Sed sit amet nulla lectus. Etiam vitae lacus ipsum. Aliquam malesuada orci nec ipsum pretium fermentum. Fusce libero mauris, convallis ut aliquam et, scelerisque vel turpis.
</div>
jsFiddle