I'm still learning CSS, so please pardon me if this is something that is easily solved or taught in a class or book.
Here's what I see:
The two gray boxes are placeholders for image files further up the page. Those live in a different div that closes out before reaching the footer div. The source for the footer is:
<div id="footer">
<div class="column">
Column 1<br>
link <br/>
link <br/>
link <br/>
link <br/>
link <br/>
link
<br><br>
link <br/>
link <br/>
link <br/>
link <br/>
link <br/>
</div>
<div class="column">
Column 2<br>
link <br/>
link <br/>
link <br/>
link <br/>
link
<br><br>
link <br/>
link <br/>
</div>
</div>
Here is the CSS for the footer:
#footer {
clear: both;
min-height: 100px;
background-color: #B0C4D1;
padding-left: 8%;
}
.column {
width: 200px;
float: left;
}
So if I make min-height long enough, then the blue covers all of the links in the footer, which is good. But I'd like to understand why I would need to do that. Why don't the columns in the footer div qualify as content so that the background gets filled up? If someone would link me to the relevant terms/tutorials explaining this, I'd really appreciate it. I'm having trouble coming up with the right words to find my answer.
add: overflow: hidden; to #footer
this will make the footer become a new block formatting context so it will contain its floated child columns
added relevant deatils from above link
Floats, absolutely positioned
elements, block containers (such as
inline-blocks, table-cells, and
table-captions) that are not block
boxes, and block boxes with 'overflow' other than 'visible' (except when that
value has been propagated to the
viewport) establish new block
formatting contexts for their
contents.
...
In a block formatting context, each
box's left outer edge touches the left
edge of the containing block (for
right-to-left formatting, right edges
touch). This is true even in the presence of floats ....
in short as long as element only contains floated children, it will not know it's got content unless you tell it, more commonly known as "clearing floats" there are other solutions available too
Floated elements collapse. Add overflow: hidden to your #footer. Example with your code here: http://jsfiddle.net/jackrugile/5HcG9/
You should read up on clearing floats.
http://www.quirksmode.org/css/clearing.html
In order to get your div #footer to grow automatically, it should float just like the divs it contains. The other option would be to add another div that does not float and has clear: both set.
#footer {
clear: both;
min-height: 100px;
background-color: #B0C4D1;
padding-left: 8%;
float: left;
width: 92%; /* Together with padding-left it's exactly 100% */
}
Related
So I am trying to create a responsive CSS for two divs. The first div is for the summary and the second div is for the summary description. How can I make the second div to be right underneath the first div while having the second div to get wrapped if the content in the second div exceeds the width of the first divs?
div.firstdiv {
padding: 60px 0;
}
div.seconddiv {
padding: 30px;
text-align: center !important;
}
<div class="firstdiv">This is a test for customer issues & solutions
<div class="seconddiv">We need to address the customer issues and provide them the appropriate solutions based on issue priority
</div>
The answer to your question is in the question itself. This is how elements behave naturally. There is no need to have your second div be inside your first, just have them as siblings, like so:
<div class="firstdiv">
This is a test for customer issues & solutions
</div>
<div class="seconddiv">
We need to address the customer issues and provide them the appropriate solutions based on issue priority
</div>
And your CSS:
.firstdiv, .seconddiv {
width:100%; // or whatever you'd like the width to be
margin:10px // again, whatever you'd like.
}
By default, the seconddiv element will show below the firstdiv element, the widths will be equal, and the text will wrap.
Side note, you should wrap the text in a p tag or similar instead of just having it floating inside your div.
You can try something with display grid, if you are willing to have a fixed size in the first div.
The solution is having both divs within the same wrapper and use CSS Grid in the wrapper div. Like this:
div.grid{
display: grid;
grid-template-columns: minmax(min-content, 300px);
grid-gap: 10px;
}
<div class="grid">
<div class="firstdiv">
This is a test for customer issues & solutions
</div>
<div class="seconddiv">We need to address the customer issues and provide them the appropriate solutions based on issue priority
</div>
</div>
I came across this really interesting thing. Was messing around with floats and clearfix. I have a section (container) which contains 3 left floated div boxes and to avoid container collapsing, I use clearfix method on it. Like that one before and after, empty content, display block and clear both. Nothing special. Now, to see how this clearfix behaves with margin on top and bottom, I created a div box on top, outside container. Container has both margin top and bottom of 50px, so it was working great. But oddly, when I tried to float an orange box outside the container, the box became contained inside container respectfully to childs of the container. I find this weird, coz that box wasn't inside container's tag, it was outside. I understand that floated elements are removed from normal document flow, so container's margin-top couldn't relay on div box any longer since it's been removed from document flow and the only element to rely on was body left. But my question is: Why did orange box became contained inside brown container if orange box is not its child?
Before:
After float: right; was applied to orange box:
I mean orange box could have been moved to any other place oddly, but not contained so nicely inside container when it's not even a child of container,
they are siblings. What's really happening here?
Code is basic:
<body>
<div id="box1"></div>
<section class="clearfix">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</section>
<div id="box"></div>
</body>
.clearfix:before,
.clearfix:after {
content: "";
display: block;
clear: both;
}
#box {
width: 300px;
height: 100px;
background: blue;
}
#box1 {
width: 300px;
height: 50px;
background: orange;
float: right;
}
As you mentioned that you are using float:right on orange box and its going inside other div then yes you have not used clear:both after using float. Point to remember that if you are using clearfix before and after on section won't work. You have to use clear:fix just after floated div or else it will break the flow and will cause issue like you are seeing.
See in demo. I simply use clear:both after floated right div and everything seems fine. To make it more simple, try to clear whenever you use float:right or left and you will not get any problem. If you are getting this with ul li tag still after last li use clear div and you are done. Hope this will help you.
I still have problem to well understand how the float property works in CSS. I do apologize because I know this is css basics but I really want to understand that and get a good explanation. I've created an example to show you.
Here is my page :
I just want to resize the second div at the right. When I look at it in the Chrome Developer Tools, I see that this div begins at the top left of the window and not after the red square. I'd like it to begins just after the red square to change the width properly without calculating the size of the square and doing something like
width = square size + width i want
Do you know how this it happens and how to properly resize the width of the second div ?
EDIT: the solution consists in add the float property to the second div too. The explanation is the following : floated elements are removed from the flow, so they don't stack with the non-floated elements.
You need to set float for another div too.
We generally do like below:
html
<div class="float-left">
<p>floated left</p>
</div>
<div class="float-left"><!--- to float next to previous div--->
<p>floated left</p>
</div>
css
.float-left{
float: left;
}
As per your comment:
We do clear the float values because the container contents would never been collapsed.
You need to float the second div.
Heres an example.
<div class="parent-div">
<div class="left">
</div>
<div class="left">
<p>This is the description of the image</p>
</div>
</div>
You need to set
p { display:inline; }
or
div { display:inline; }
since paragraphs and divs are block elements.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
the reason is that floated elements are removed from the flow, so they don't stack with the non-floated elements. - therefore they don't "take up space" like before. This is why your text div starts at the top left of its container.
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
You have to set float for both DIVs
Here is the updated code:
HTML:
<div id="main_container">
<div class="left"></div>
<div class="right">
<p>This is the description of the image <i>Random text</i>
</p>
</div>
<!--Comment below <DIV> to see the result-->
<div class="clear"></div>
</div>
CSS
#main_container {
border:5px solid #000;
}
.left, .right {
width: 100px;
height: 100px;
background: red;
float:left;
}
.right {
background: blue;
width: calc(100% - 100px);
}
.clear {
clear:both;
margin:0;
padding:0;
}
Also, just to add one more important fact related to "float" is, make sure you add "clear:both" property after "float".
Why?? Because, a common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
Here is the Fiddle for the same: http://jsfiddle.net/1867ud9p/7/
Hope this will help!
I've been reading about how elements with the float attribute do not have their height accounted for. Therefore, I should use clear:both right before the end of the parent div so that it will stretch over the entire inner div.
You can see on This Page that the div with the id full-height-template-container is not stretching over its inner content, and therefore the footer (copyright text on the bottom right) is coming up too high on the page.
The layout looks like this:
<div id="full-height-template-containter">
<div id="content-container">
<div id="full-width" style="float:left;">
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
What else can I try in order to make the outer div stretch over its children?
Thanks in advance!
That's a common problem. To solve it, the clearfix hack in its many variants was invented.
I was confronting the same issue until I inserted this version of "Clearfix" at the top of the container that needs to be stretched as such:
CSS:
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility:hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
HTML:
<div class="clearfix"> </div>
<span class="doc">
John Nixon
Henry Wright
</span>
In #full-height-template-container you are using height: 100% which means the div takes 100% height of the parent.
If we track back in your CSS each parent element is assigned height: 100%, including the html and body elements, which means that the height is taken from the window - so as a result the div will never exceed the size of the window (but content will still overflow).
So it is not the floats that are causing the problem, it is the height you are explicitly assigning to each div.
i put your sample on fiddle and gave it some css to show the divs:
http://jsfiddle.net/WRzsE/
You can clearly see that it works perfectly as you describe you would expect it to. You are doing something else wrong i suspect...
Perhaps you are using a position: absolute somewhere, wich would cause the elemnt to be lifted out of its parent, and would make the parent not stretch (just thinking out loud here...)
edit:
I just took a look at the actual page (overlooked the link). Your div's are stretching just fine. The problem is with the positioning of your footer, wich is set to absolute. I suspect you are trying to achieve a sticky footer, have a look at this, works like a charm. I use it all the time: http://ryanfait.com/sticky-footer/
I recently start to learn CSS and table less design.
After reviewing some tutorials now I am involved with converting PSD Mockup to XHTML and CSS.
Most often my problem is to positioning elements and containers.
for example this below design:
I am converting this to CSS and HTML.
I have no problem with styling Input elements.
about main layout it seems two columns layout , right ?
How do I style containers ?
I wrote this code It displays better here.
I divided my page to two containers and valued (float:left) to left container.
As specified in jsFiddle link elements on the left side container had come out of the box (I think its because of float).
I can't set containers position to absolute.
Now please help me to refactor and change my code. And please explain to me how to position elements right ?
i think a
<div style="clear:both;"></div>
before the </div> of the container will work.
edit:
http://jsfiddle.net/xNwAc/5/
Try and have a wrapping element to contain your two columns. with W3C code, you'll want to use floated elements. The elements don't have any padding, you can work on them yourself, but it's a very basic structure to follow:
The CSS:
#wrapper { width: 960px; margin: 0 auto; background: blue; } /* positions it center of page */
#left { float: left; width: 50%; background: red;}
#right { float: right; width: 50%; background: green;}
The HTML:
<div id="wrapper">
<div id="left"> Left content </div>
<div id="right"> Right content </div>
</div>
You have to set a new formating context on the container, with overflow:auto; eg.
I sugger you to read the specification which is very clear and useful.
As the exclamation point is not a part of the content you can place it as a background image.