I am creating my first real responsive layout and experiencing difficulties with css & clearfix. I made a JS fiddle (http://jsfiddle.net/brandrally/GFXP9/1/) demonstrating the problem with the code I created.
Basically I just want 'Line 1' and 'Line 2' to site beneath each other without a space. I plan to place quite a few divs inside the .line div's hence why I believe I need to clearfix them up.
CSS
div#content {max-width: 400px; min-width: 300px; margin:0 auto; }
div#left {width: 100px; background:#CCC; float: left; }
.line {border-bottom: 1px solid #000;}
div#right {background:#F63; margin-left: 100px;}
/* Clearfix */
.CF:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.CF { display:inline-block; }
/* IE mac \*/
.CF { display:block; }
HTML
<div id="content" class="CF">
<div id="left" class="CF">
Left Content <br/>
Displayed<br/>
Demo<br/>
Problem.
</div>
<div id="right" class="CF">
<div class="CF line"> Line 1</div>
<div class="CF line"> Line 2</div>
<div class="CF line"> Line 3</div>
</div>
</div>
if you want to avoid clearing .CF with :after from #left you need to add overflow:hidden; to .CF.
.CF will not need the clearfix pseudo since overflow will do the job.
http://jsfiddle.net/GFXP9/5/
Related
I'm trying to use CSS Grid to have a div that starts in the middle of the div in the row above. I want both divs to wrap around the text. This is what I'm trying to achieve:
As you see on the picture, in some cases, the subtitle might be longer than the title, and sometimes not.
I tried different ways but I can't figure it out. Here's my last attempt. The problem here is that (of course) the "Title" div becomes wider as the subtitle is longer.
#container{
border:solid black;
display:grid;
grid-template-columns: max-content auto;
grid-template-rows:1fr 1fr;
}
#title{
border:solid blue;
grid-column:1/2;
grid-row:1/2;
}
#subtitle-container{
border:solid red;
grid-column:1/2;
grid-row:2/3;
display:grid;
grid-template-columns:50% max-content;
}
#subtitle-text{
border:solid green;
grid-column:2/3;
}
<div id="container">
<div id="title">Title</div>
<div id="subtitle-container">
<div id="subtitle-text">This is a rather long subtitle
</div>
</div>
</div>
Here is an idea where you can create a hidden float element that will push the subtitle. You simply make the float element 50% width of the title and you need to make the width of the title fit-content.
.container{
border:solid black;
margin:5px;
}
.title{
border-bottom:solid blue;
width:-moz-fit-content;
width: fit-content;
}
.title:after {
content:"";
float:left;
width:50%;
height:2px; /*not needed*/
background: red; /*not needed*/
margin-top:10px; /*need to be a small value*/
}
.subtitle-text{
border:solid green;
display:inline-block;
}
<div class="container">
<div class="title">Title</div>
<div class="subtitle-text">This is a rather long subtitle</div>
</div>
<div class="container">
<div class="title">Long long Title</div>
<div class="subtitle-text">Subtitle</div>
</div>
<div class="container">
<div class="title">Very Long long Title</div>
<div class="subtitle-text">Subtitle</div>
</div>
I have a list of product divs containing two more divs each displayed vertically within - top one containing an image and bottom one text. The text is variable in size so the outer divs size also is variable. These outer divs float left and go 3 to a row until a div with long text happens then the next row starts immediately after that column, leaving a gap.
So if I have a row where the 2nd div has 3 lines of text to the other two's 1, the 4th div will start not in the first position on the next line but in the 3rd.
Here is an image demonstrating what I see now vs a second what I would like to do:
And what I'm aiming to do
Do not use float. Take a look at this fiddle:
JSFiddle Demo
CSS:
.block {
width: 33.33%;
display: inline-block;
vertical-align: top;
margin-right: -3px;
}
.inner {
min-height: 100px;
margin-bottom: 10px;
background: #000;
}
You can create a row for the div elements, this will produce the layout you need! I have also provided a CSS only solution where the class clearfix will do the same thing as row class!
CSS3:
.row{
display:flex;
}
.box{
background-color:grey;
float:left;
margin:3px;
width:100px;
height:100px;
}
<div class="row">
<div class="box">1</div>
<div class="box" style="height:200px;">2</div>
<div class="box">3</div>
</div>
<div class="row">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
CSS:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.box{
background-color:grey;
float:left;
margin:3px;
width:100px;
height:100px;
}
<div class="clearfix">
<div class="box">1</div>
<div class="box" style="height:200px;">2</div>
<div class="box">3</div>
</div>
<div class="clearfix">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
HTML
<div class="flex-container">
<div class="box">img</div>
<div class="box">img</div>
<div class="box">img</div>
</div>
<div class="flex-container">
<div class="box">txt</div>
<div class="box">txt</div>
<div class="box">txt</div>
</div>
CSS
.flex-container{
background:red;
display:flex;
width:100%;
height:auto;
margin:0% auto;
padding:1% 0;
}
.box{
min-width:100px;
height:auto;
padding:1%;
margin:0 1%;
flex-grow:1;
background:green;
}
Also, Please chech whether you have cleared all floats
Please see Using CSS Flexible Boxes MDNweb docs
I think it's my lack of css knowledge, but i don't get this thing working. My purpose is to have a container div which have the MAXIUMUM witdh of 800px and aligned in the middle of the page, with one or two elements per 'row', depending on the available screen-space. But in the example you see that the whole 800px is taken. How to accomplish that the 800px is only the max?
HTML:
<div style="background-color:red;max-width:800px;display: inline-block">
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
</div>
CSS:
.contentgedeelte {
width:310px;
background:white;
margin:10px;
float:left;
border-radius:5px;
padding:5px;
}
http://jsfiddle.net/plunje/LmJSy/
OK, here you go:
#container {
width:800px;
margin:0 auto;
text-align:center;
}
.row {
display:inline-block;
background:red;
margin:0 auto;
}
.contentgedeelte {
width:310px;
background:white;
margin:10px;
border-radius:5px;
padding:5px;
display:inline-block;
text-align:center;
}
You'll need to add a .row element to wrap your contentgedeeltes in pairs (if that's how you want them displayed). To be honest you're better off just calculating the widths properly, but if you really can't, try this. Also, I've taken your container element, remove the inline styling and added the ID #container.
Use display: block; instead of inline.
Inline-block is for elements which line up side by side, not for pagewraps. If this is a center of the page container there is no need to display inline.
If you want the articles to display as inline elements, that seems to work.
Or just tally your styles to add up to 400px instead of 340px.
You need a little more structure. See below.
HTML
<div class="container">
<div class="row">
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
</div>
<div class="row">
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
.container {
max-width: 800px;
background-color: red;
padding: 1em;
overflow: hidden;
}
.contentgedeelte {
width:48%;
background:white;
margin:1%;
float:left;
border-radius:5px;
padding:5px;
display: block;
}
I'm a newbie with html so please be patient.
I'm trying to align 4 divs in parallel where the first,third and fourth div are static,the second div is empty and i need it to occupy the remain place e.g "width:auto".
I don't want to use table to solve the problem.
Is there a way to solve it using divs?
HTML:
<div class="container">
<div class="content" >
first
</div>
<div class="empty">
</div>
<div class="content">
third
</div>
<div class="content">
fourth
</div>
</div>
CSS:
.container{
strong textwidth:1020px;
height:40px;
}
.content{
position:relative;
background-color:#2cc2e7;
height:40px;
width:142px;
float:right;
margin-right:5px;
}
.empty{
background-color:#f1d486;
height:40px;
width:auto;
margin-right:5px;
}
You will need to change the order of the elements:
<div class="container">
<div class="first content">first</div>
<div class="content">third</div>
<div class="content">fourth</div>
<div class="empty"></div>
</div>
And then just float the first one to the left, other two to the right, and the .empty one, don't float it but set an overflow to auto —or hidden.
.content {
float: right;
width: 142px;
}
.first {
float: left;
}
.empty {
overflow: auto;
}
http://jsfiddle.net/GTbnz/
If you are prepared to add below the empty div then you could use the following:
<div class="empty">
</div>
with a style sheet of:
.container {
width:1020px;
height:40px;
display:table;
width:100%;
}
.container div {
height:40px;
display:table-cell;
}
.content {
background-color:#2cc2e7;
width:142px;
max-width:142px;
}
.empty {
background-color:#f1d486;
}
This was whichever of the 4 div's has a class 'empty' will auto-expand to fill the available space and the other div sizes will all be 142 px.
I need the center div div#b to fill out the gab between div#a and div#c.
<div id="a">
<span>Div1</span>
</div>
<div id="b">
<span>Div2</span>
</div>
<div id="c">
<span>Div3</span>
</div>
I tried to do this by placing width: 100% on div#b but without luck.
div
{
border:1px solid red;
}
div#a
{
float:left;
width:50px;
}
div#b
{
float:left;
width:100%; ?? <!-- Doesn't work!!! -->
}
div#c
{
float:right;
width:50px;
}
How can I get div#b to expand from div#a to div#c?
There can be no line breaks.
CSS3
You can implement this dynamic behavior using the CSS3 Flexible Box Layout Module:
<style type="text/css">
div.Container
{
width: 100%;
display: box;
display: -moz-box;
display: -ms-box;
display: -webkit-box;
}
div.B
{
background: magenta;
box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-webkit-box-flex: 1;
}
</style>
<div class="Container">
<div style="width: 50px; background: cyan;">
A
</div>
<div class="B">
B
</div>
<div style="width: 50px; background: yellow;">
C
</div>
</div>
A new version of FireFox, a new version of Google Chrome, Internet Explorer 10 and a new version of Safari supports CSS3 flexible box layout. Internet Explorer 9 and Opera is lacking support at the moment.
I also want to mention this new way to do it in FireFox:
<div style="float: left; width: 50px; background: cyan;">
A
</div>
<div style="float: left; width: -moz-calc(100% - 100px); background: magenta;">
B
</div>
<div style="float: left; width: 50px; background: yellow;">
C
</div>
FireFox is the only browser that support the calc function at the moment.
CSS2
Here is the old way to do it:
<div style="padding-left: 100px;">
<div style="float: left; width: 50px; margin-left: -100px; background: cyan;">
A
</div>
<div style="float: left; width: 100%; margin-left: -50px; background: magenta;">
B
</div>
<div style="float: left; width: 50px; background: yellow;">
C
</div>
</div>
A width of 100% inside the container div is the width of the container minus the 100px left padding. Then there is room for the left and right 50px div elements. Then you have to position them using some negative margin and floating.
Feature detection
Use feature detection with Modernizr. Then you can use CSS2 for browsers that lack support for CSS3 flexbox.
If you do .NET development you can download Modernizr with NuGet.
I've hit similar problems myself. The problem here is "width: 100%" will basically inherit the width of the parent container.
The other problem is the float. When you ask div#b to float to the left alongside div#a, you can't use the fancy margin trick to force div#b to stay out of the way of div#a. (In other words, margin can be used to keep div#b from entering and interfering with a certain amount of space on any of its sides.) However, with float, the margin is now not pushing div#b away from the edge of the page, but away from the edge of div#a.
OK, so the solution looks like this. Remove the float on div#b, and then apply left and right margins so div#b doesn't interfere with either side columns. Let div#b determine its own size (i.e. don't give it a "width"), so it will fit between the two floats. Lastly, shift div#b so that the floats occur before div#b is put in place, so that div#b is put between the floats.
Here's the new code:
<style type="text/css">
div
{
border:1px solid red;
}
div#a
{
float:left;
width:50px;
}
div#b
{
margin-left: 55px;
margin-right: 55px;
}
div#c
{
float:right;
width:50px;
}
</style>
<div id="a">
<span>Div1</span>
</div>
<div id="c">
<span>Div3</span>
</div>
<div id="b">
<span>Div2</span>
</div>
Determining margins is tricky. Borders aren't counted in the width calculation of an element, so a 50px-wide div with a 1px border is actually 52px-wide.
I have a feeling you won't like this answer, but the easiest way to do it is to remove float: left and any width from div#b, and then switch up the order of your divs, so both the sidebars are before your main content area. Here's the code:
HTML:
<div id="a">
<span>Div1</span>
</div>
<div id="c">
<span>Div3</span>
</div>
<div id="b">
<span>Div2</span>
</div>
CSS:
div
{
border:1px solid red;
}
div#a
{
float:left;
width:50px;
}
div#b
{
overflow: hidden;
/*margin: 0 60px;*/
}
div#c
{
float:right;
width:50px;
}
Note that I've applied overflow: hidden to the middle div - this will force it into columns (in most browsers). You could use the given margins instead, if you're not comfortable with a "magic" solution (there is a reasonable explanation for it, but I can never remember it off the top of my head).