This question already has answers here:
How do you keep parents of floated elements from collapsing? [duplicate]
(15 answers)
What is a clearfix?
(10 answers)
Closed 2 years ago.
I have always had this problem and I avoid floating div's because of this problem. The code seems to work but when you inspect the code in Google's developer tools it shows that the Main div is 0px tall. the problem I have with this is what if I want the Main div to have an image or a color. The solution I found to getting this to work is applying a float to every div so Main would also get a float but floating the Main div will break the centering of the main container. Does anyone know of a way to fix the two divs going outside of the main div?
.float-left {
float: left;
}
.float-right {
float: right;
}
main {
width: 100%;
height: auto;
background-color: darkgray;
}
.div1 {
height: 200px;
width: 50%;
background-color: darkgreen;
}
.div2 {
height: 200px;
width: 50%;
background-color: darkblue;
}
<link href="https://meyerweb.com/eric/tools/css/reset/reset200802.css" rel="stylesheet" type="text/css">
<main>
<div class="div1 float-left"></div>
<div class="div2 float-right"></div>
</main>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
When i resize my window to a smaller size, the first div goes down. It looks like it happens when the text of the second div break to a new line due to the resize of its box.
I don't understand why the first div is not staying at the top. It's not like i put a vertical align bottom on the container..
I'm aware of flex-box but i need to use inline-block in this project and i shouldn't have to use float in this situation, it should work without it..
https://jsfiddle.net/ezp0j7fu/
HTML
<div class="container">
<div class="left">LEFT LEFT LEFT LEFT </div>
<div class="right">RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT</div>
</div>
CSS
body {
line-height: 0px;
}
.container {
background: black;
height: 40px;
width: 100%;
line-height: 0px;
}
.container div {
display: inline-block;
margin: 0px;
padding: 0px;
line-height: 20px;
height: 100%;
}
div.left {
background: blue;
height: 100%;
width: 30%;
}
div.right {
background: green;
height: 100%;
width: 60%;
}
I've see this many times with in-line blocks. While I can't explain to you exactly why this happens (maybe someone with more indepth CSS knowledge can englighten us) to fix it you need only add a float property to the div.left tag. Then your left div and right div will both be at the top.
div.left {
background: blue;
height: 100%;
width: 30%;
float:left;
}
This question already has answers here:
How to force parent div to expand by child div width/padding/margin/box?
(3 answers)
Closed 4 years ago.
I think this is a pretty basic question (at least it seems to me that it's simple). I have a div (child) inside another div (parent).
I want the parent to change its size so the child is contained inside it. Currently, no matter what I do, when the child doesn't fit the browser window, it overflows and the parent remains inside the window width boundaries.
I'm using just the code bellow:
.parent {
background-color: yellow;
height: 600px;
padding-top: 30px;
}
.child {
width: 900px;
height: 300px;
background-color: red;
}
<div class="parent">
<div class="child"></div>
</div>
What can I do so the parent div grow and overflow the browser window when its child is wider than that.
Add width: max-content; to your parent div.
.parent {
background-color: yellow;
height: 600px;
padding-top: 30px;
width: max-content;
}
.child {
width: 900px;
height: 300px;
background-color: red;
}
<div class="parent">
<div class="child"></div>
</div>
Update after comments:
This solution isn't compatible with Internet Explorer and Firefox. Therefore, if possible, display: inline-block; is a better solution.
This question already has answers here:
Margin on child element moves parent element
(18 answers)
Closed 6 years ago.
If static positioned elements are not affected by the top, bottom, left, and right properties, why does the box move along with the container when I change the margin-top value of the box element?
I have kept my code at: https://jsfiddle.net/b9rtwkq7/5/
HTML:
<div class="container">
<div class="box">
</div>
</div>
CSS:
.container
{
width:500px;
height: 500px;
background-color: grey;
margin-top: 00px;
}
.box
{
width:100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
The margins are collapsed in the jsfiddle you posted: https://www.w3.org/TR/CSS2/box.html#collapsing-margins
Add overflow: auto/hidden to .container or use the following css which I've added in a class called .no-collapse myself:
.no-collapse:before {
content: "";
display: table;
}
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 7 years ago.
I am creating a website and I have a div which sets the main (called page) and max width of the main content. How would I in CSS set another div to be 50% of the page so it will always be centred. Thanks.
Main content Div:
#page{ /* Sets page width and colour*/
margin-left: 200px;
min-width: 400px;
max-width: 982px;
background-color: #FFFFFF;
padding-bottom: 5px;
}
EDIT:
<div class="Serverimg">
<div class="CenterDiv">
<img src="C:\Users\Corey\Documents\Web Project\images\serverroom.jpg" class="ServerRoom" alt="" style="width:400px;height:300px": />
</div>
</div>
WITH CSS:
#CenterDiv {
width: 50%;
margin: 0 auto;
}
To do this you put another div inside of it and add the following CSS:
#centerDiv {
width: 50%;
margin: 0 auto;
}
What you are doing is telling the centerDiv to always be 50% of the width of page and then assigning it equal margins on either side so it floats in the center.
This question already has answers here:
Center parent div with float children
(4 answers)
Closed 5 years ago.
I am trying to create a responsive grid. I have a 'parent' div which contains floating children. Depending on the page width a variable number of children is shown per 'row'. The children should be centered.
To get the 'parent' div to fit the children I set display:table on the parent div.
Please see the following fiddle:
http://jsfiddle.net/dwjbosman/cXuQ6/5/
css:
.page {
background: #a00;
width:700px;
margin: 20px;
}
.Parent {
background: #ccc;
border: 1px solid black;
display: table;
margin-left: auto;
margin-right:auto;
}
.Child {
float: left;
width: 150px;
height: 50px;
background:red;
margin: 5px;
}
.br {
clear: both;
}
html:
<div class='page'>O1
<div class="Parent">
<div class="Child">a</div>
<div class="Child">b</div>
<div class="Child">c</div>
<div class="Child">d</div>
</div>
Example O1 works as expected. However I want it to work with more floating children.
Example O2: works if I manually insert a clear: both after one row of children. This of course breaks the responsiveness of the layout.
If I leave out the 'clear' it no longer works and the result is example O3. The parent div becomes too wide and the children are no longer centered.
Is there a way to get the example O2 behavior while retaining responsive behavior?
Using CSS3, you can clear every 4th .Child, starting at #5:
div.Child:nth-child(4n+5){
clear: both;
background-color: #ddf;
}
Browser support isn't terrible: https://developer.mozilla.org/en-US/docs/CSS/:nth-child#Browser_compatibility
I forked your fiddle: http://jsfiddle.net/ghodmode/y8g2V/