This question already has answers here:
Floating elements within a div, floats outside of div. Why?
(11 answers)
Closed 6 years ago.
I am faced with a CSS problem. The situation is as follow:
I have this kind of structure:
#Block {
background-color: #FF0000;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
}
[class="Element"] {
width: 33.33%;
background-color: #0000FF;
float: left;
}
<div id="Block">
<div class="Element">
Some contents.
</div>
<div class="Element">
Some more contents.
</div>
<div class="Element">
Still some more contents.
</div>
</div>
I was expecting to see a red box behind my 3 elements(blue), containing them.
But I only see a red rectangle behind the elements, but with the wrong size, more precisely not high enough. It seems that the Block part is totally un related to the rest.
What did I do wrong?
Clear the floats using this:
#Block:after{
content:'';
display:block;
clear:both;
}
and I guess that looks OK now.
Why this happens?
If the containing blocks have floating elements, then it will get height only if you clear the floating context.(See an example here)
If any one of them are not floated, then the containing block takes the height of this element.
You can also use overflow: hidden on the containing block to get the same effect.
#Block {
background-color: #FF0000;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
}
[class="Element"] {
width: 33.33%;
background-color: #0000FF;
float: left;
}
#Block:after{
content:'';
display:block;
clear:both;
}
<div id="Block">
<div class="Element">
Some contents.
</div>
<div class="Element">
Some more contents.
</div>
<div class="Element">
Still some more contents.
</div>
</div>
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
Im a beginner in css, and Im trying to build something where I have the div with the yellow background a little bit in front of the red div and then I want the gray div next to the yellow div.
Im trying to achieve this with the code below, and it is already almost doing what Im looking for, the only thing that is happening that I dont want is that the gray div have a little white space between the yellow div, but Im not understanding why. And while Im resizing the browser the yellow div moves down and is no longer above the red div. Do you know why?
Thanks!
html:
<div class="container" style="background-color:#e02; color:#fff;">
<div class="content">
<header>
<h1>
Title
</h1>
</header>
</div>
<div class="container" style="background-color:#fff";>
<div class="content ">
<ul class="links">
<a>Users</a>
<a>Users</a>
<a>Users</a>
<a>Users</a>
</ul>
<div class="text" style="background-color: #DDD;">
<p>
Go to this links and
</p>
</div>
</div>
</div>
</div>
css:
*, *:before, *:after{
margin: 0;
padding: 0;
}
.container{float:left; width:100%}
.content{width:50%; margin:0 25%; padding: 40px 0}
.links{
width: 100%;
display: inline-block;
}
.links a{
padding: 30px;
float: left;
color:#aaa;
font-size: 16px;
font-weight: 600;
background: yellow;
margin-top: -10%;
border:1px solid #aaa;
}
jsfiddle:
https://jsfiddle.net/s4wwmpqk/4/
An immediate fix to your problem can be done by changing .links
.links{
width: 100%;
display: block;
}
And adding
.text {
clear: both;
}
Fiddle: https://jsfiddle.net/3jjv5zqe/
Why its happening is an inherited behaviour with the style inline-block.
See:
Why is there an unexplainable gap between these inline-block div elements?
Edit:
The reason why your links are moving down is because of the margin-top: -10% you had on your .links a. Percentages scale based on the parent element's width so as the .links width grew smaller, so did the negative margins.
Updated Fiddle:
https://jsfiddle.net/3jjv5zqe/1/
This question already has answers here:
Align two inline-block div with content
(2 answers)
Closed 7 years ago.
Desired result: The two divs with class inline should be on the same horizontal level (the second one contains two other divs with some content).
However, as can be seen below, the two divs are not aligned vertically. If I remove the content (the word "text") from both the .inside divs, they line up as expected.
How can I make them line up? What is causing this?
.inline,
.inside {
margin: 0;
padding: 0;
width: 100px;
height: 100px;
}
.inline {
display: inline-block;
background-color: chartreuse;
}
.inside {
height: 48px;
background-color: salmon;
border: solid 1px black;
}
<div class="inline">
</div>
<div class="inline">
<div class="inside">text</div>
<div class="inside">text</div>
</div>
<hr>
<div>Without content (i.e. the word "text"):<div>
<div class="inline">
</div>
<div class="inline">
<div class="inside"></div>
<div class="inside"></div>
</div>
.inline {
vertical-align: top;
}
Thanks everybody.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to be able to place two divs side by side, the right div with text and the left one with a picture but I cant get it to work, I tried to float them right and left but that didn't work.
Here is my code
<div id="container">
<div id ="pic">
<img src="IMG_4847.jpg"alt="me"/>
</div>
<div id ="about">
<h1>About Me</h1>
<p>Hello my name is Rebekah, I’m 23 and this is my blog </p>
</div>
</div>
#about
{
padding-left: 500px;
padding-right: 100px;
padding-top: 60px;
}
#pic
{
padding-left: 110px;
padding-top: 60px;
}
You need to float the elements:
#pic should be floated left
#pic {
float:left;
}
#about should be floated right
#about {
float:right;
}
http://jsfiddle.net/x19wwk9n/
You also need the # on your about tag within your CSS file.
You need to give your CSS the float instruction. Try giving both parts this:
float: right;
Try this solution:
#about
{
padding-left: 500px;
padding-right: 100px;
padding-top: 60px;
display: inline-block;
}
#pic
{
padding-left: 110px;
padding-top: 60px;
display: inline-block;
}
give both the divs the property to stay side bi side this way:
#about
{
padding-top: 60px;
float: left;
}
#pic
{
padding-top: 60px;
float: left;
}
and in your html after the two divs:
<div id="container">
<div id ="pic">
<img src="IMG_4847.jpg"alt="me"/>
</div>
<div id ="about">
<h1>About Me</h1>
<p>Hello my name is Rebekah, I’m 23 and this is my blog </p>
</div>
<br style="clear:both;">
to reset the float property and keep the rest of the layout as you want it. Note I have removed a closing tag that was not necessary
use display: table
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
#container{
display: table;
width: 100%;
height: 200px;
}
#pic,
#about{
display: table-cell;
vertical-align: middle;
width: 50%;
padding: 25px;
}
#pic{
background: #f00;
}
#about{
background: #00f;
}
<div id="container">
<div id ="pic">
<img src="IMG_4847.jpg"alt="me"/>
</div>
<div id ="about">
<h1>About Me</h1>
<p>Hello my name is Rebekah, I’m 23 and this is my blog </p>
</div>
</div>
You can display divs side by side using float:left. You can also get them to display side by side using inline-block and or float:left and float:right (like others had mentioned). There are actually multiple ways this can be achieved and each one will likely depend on what uses cases you are trying to work with.
HTML:
<div></div>
<div></div>
CSS:
div {
width:50%;
border:1px solid;
height:200px;
box-sizing:border-box;
float:left;
}
Note: I added height because there is no content. Just to help show you better visually. And the box-sizing is to help the box model take the border into account. Otherwise the 1px border would cause the second div to wrap under the first.
Recommendation:
Also instead of doing this..
<div id="pic"></div>
<div id="about"></div>
I would recommend this..
<div class="column"></div>
<div class="column"></div>
And then something like..
.column {
width:50%;
border:1px solid;
height:200px;
box-sizing:border-box;
float:left;
}
Example:
https://jsfiddle.net/4eocqjur/1/
After thoroughly researching for the way to fix this I have still not found the answer I seek. I finally decide to post my problem on stackoverflow.com because I finally give up trying to find the answer. What I get as a result is two boxes with content on top and one box on the bottom.
Here is the CSS code:
#content_area
{
overflow: hidden;
display: inline-block;
background: white;
margin-top: 20px;
margin-right: 110px;
margin-left: 110px;
margin-bottom: 20px;
}
.box
{
display:inline-block;
width: 33.33%;
float: left;
background: #FFFFFF;
padding: 15px;
}
Here is the HTML Code:
<div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
</div>
The problem is your padding, as mentioned above.
Here is a fiddle with the padding removed and colours added: http://jsfiddle.net/gj0wmgym
.box
{
display:inline-block;
width: 33.33%;
float: left;
background: #FFFFFF;
}
The problem with your code is that your .box class assigns a width of 33%, with additional padding. This leads to a total width of more than 100%. Padding is added to the .box's initial width because that's how the default box model works in CSS.
To fix this problem, add this line to the .box's style declarations:
box-sizing: border-box;
You can see a live demo here. If you want to learn more about the box model, this article by Chris Coyier is an excellent reference.
From what I can tell, your floats are working correctly.
Your html was missing the id attribute, so make sure to add that to your html.
What you are probably expecting is for the floats to not wrap to the next line, which is because the padding gets added to the width size (the elements are greater than 33%). You instead need to set the box sizing attribute see this article
* {
box-sizing:border-box;
}
#content_area
{
overflow: hidden;
display: inline-block;
background: white;
margin-top: 20px;
margin-right: 110px;
margin-left: 110px;
margin-bottom: 20px;
}
.box
{
display:inline-block;
width: 33.33%;
float: left;
background: #FFFFFF;
padding: 15px;
}
<div id="content_area">
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
<div class="box">
//enter text here
</div>
</div>
This question already has answers here:
How to place div side by side
(7 answers)
Closed 1 year ago.
My goal is to display two <div>s side-by-side with the content from both <div>s aligned at the top. I do not want long text in the second <div> to wrap underneath the first one.
Finally, I do not want to set the width of the second <div> because I need the markup to work in different widths.
Sample markup is below and at http://jsfiddle.net/rhEyM/.
CSS
.left-div {
float: left;
width: 100px;
height: 20px;
margin-right: 8px;
background-color: linen;
}
.right-div {
float: left;
margin-left: 108px;
background-color: skyblue;
}
HTML
<div class="left-div">
</div>
<div class="right-div">
My requirements are <b>[A]</b> Content in the two divs should line
up at the top, <b>[B]</b> Long text in right-div should not wrap
underneath left-div, and <b>[C]</b> I do not want to specify a
width of right-div. I don't want to set the width of right-div
because this markup needs to work within different widths.
</div>
Try to Use Flex as that is the new standard of html5.
http://jsfiddle.net/maxspan/1b431hxm/
<div id="row1">
<div id="column1">I am column one</div>
<div id="column2">I am column two</div>
</div>
#row1{
display:flex;
flex-direction:row;
justify-content: space-around;
}
#column1{
display:flex;
flex-direction:column;
}
#column2{
display:flex;
flex-direction:column;
}
I removed the float from the second div to make it work.
http://jsfiddle.net/rhEyM/2/
Try this : (http://jsfiddle.net/TpqVx/)
.left-div {
float: left;
width: 100px;
/*height: 20px;*/
margin-right: 8px;
background-color: linen;
}
.right-div {
margin-left: 108px;
background-color: lime;
}
<div class="left-div">
</div>
<div class="right-div">
My requirements are <b>[A]</b> Content in the two divs should line up at the top, <b>[B]</b> Long text in right-div should not wrap underneath left-div, and <b>[C]</b> I do not want to specify a width of right-div. I don't want to set the width of right-div because this markup needs to work within different widths.
</div>
<div style='clear:both;'> </div>
Hints :
Just use float:left in your left-most div only.
No real reason to use height, but anyway...
Good practice to use <div 'clear:both'> </div> after your last div.