I happened to see a div which had the style clear:both! What is the use of clear in style?
<div style="clear:both">
clear:both makes the element drop below any floated elements that precede it in the document.
You can also use clear:left or clear:right to make it drop below only those elements that have been floated left or right.
+------------+ +--------------------+
| | | |
| float:left | | without clear |
| | | |
| | +--------------------+
| | +--------------------+
| | | |
| | | with clear:right |
| | | (no effect here, |
| | | as there is no |
| | | float:right |
| | | element) |
| | | |
| | +--------------------+
| |
+------------+
+---------------------+
| |
| with clear:left |
| or clear:both |
| |
+---------------------+
Just to add to RichieHindle's answer, check out Floatutorial, which walks you through how CSS floating and clearing works.
When you use float without width, there remains some space in that row. To block this space you can use clear:both; in next element.
Related
What I got is this:
______________________________
| | | |
| div 1 | | div 2 |
| | | |
|______________| | |
| | |
| wrapper |_____________|
|______________ _____________|
| | | div 4 |
| div 3 | |_____________|
|______________|_______________|
Now, what I want is this:
______________________________
| | | |
| div 1 | | div 2 |
| | | |
|______________| | |
|______________ | |
| | |_____________|
| div 3 | _____________|
|______________| | div 4 |
| wrapper |_____________|
|______________________________|
Is there maybe a way to do this via css(3) only?
There is no float: top, but you can float divs 1 and 3 left, and 2 and 4 right. Then they will float into the space above them.
Fiddle
<div class="left">1</div>
<div class="right">2</div>
<div class="left">3</div>
<div class="right">4</div>
I have ASP:REPEATER (dynamic list) with floating divs to the left that looks like this:
+---------------------+ +---------------------+ +---------------------+
| | | | | |
| | | | | |
| | | | +---------------------+
| | | | +---------------------+
+---------------------+ +---------------------+ | |
| |
| |
| |
+---------------------+
+---------------------+ +---------------------+ +---------------------+
| | | | | |
| | | | | |
| | | | | |
| | | | | |
+---------------------+ +---------------------+ +---------------------+
But the 4th div is supposed to apear in another line no matter the height of the 3rd one. The problem is that I have a responsive design so I can't give it a specific height. It should be looking like this:
+---------------------+ +---------------------+ +---------------------+
| | | | | |
| | | | | |
| | | | +---------------------+
| | | |
+---------------------+ +---------------------+
+---------------------+ +---------------------+ +---------------------+
| | | | | |
| | | | | |
| | | | | |
| | | | | |
+---------------------+ +---------------------+ +---------------------+
+---------------------+
| |
| |
| |
| |
+---------------------+
Here's the class of each div:
.wrapProducts
{
float: left; width: 30%;
margin: 0% 3% 5% 0%;
}
How can I fix it?
Thanks a lot!
You can't use float in this situation, what is happening is the normal behavior of float. Read this CSS-Tricks article for more infos.. You can clear every third elements but then your layout won't be responsive anymore.
You only have two responsive solutions to achieve your list layout:
You can either use a table layout with table, tr and td, or you can use inline-block divs instead of floating divs.
Try using clear:both on the styling of the final div.
If you remove the final div do you otherwise achieve your design?
I'm trying to create a div with images inside it, and there is space between them. For example, I want the space between them is 2px, I can use margin:1px; so it will become 2px when one's left-margin meet other's right-margin, same for top and bottom. But there is also space between image and div's border, so the div will become like this:
+------------------------------------------+
| |
| +---------------+ +---------------+ |
| | | | | |
| | | | | |
| | | | | |
| | IMG1 | | IMG2 | |
| | | | | |
| | | | | |
| | | | | |
| +---------------+ +---------------+ |
| DIV |
| |
| +---------------+ +---------------+ |
| | | | | |
| | | | | |
| | IMG3 | | IMG4 | |
| | | | | |
| | | | | |
| | | | | |
| +---------------+ +---------------+ |
| |
+------------------------------------------+
When what I'm actually trying to do, is this:
+---------------+---+---------------+
| | | |
| | | |
| | | |
| IMG1 | | IMG2 |
| | | |
| | | |
| | | |
+---------------+ +---------------+
| DIV |
| |
+---------------+ +---------------+
| | | |
| | | |
| IMG3 | | IMG4 |
| | | |
| | | |
| | | |
+---------------+---+---------------+
How to do this, without set style for every single image?
If adding classes or IDs is not an option and you do not want to style the images individually. Then you could try using img:nth-child(n) or img:nth-of-type(n).
First assign a right margin to every odd image:
img:nth-of-type(odd){
margin-right: 1px;
}
Then a left margin to every even:
img:nth-of-type(even){
margin-left: 1px;
}
And finally a top margin to every image but the first two:
img:nth-of-type(n+3){
margin-top: 2px;
}
You could also leave out one of the left or right margins and increase the one you leave in... thereby reducing the size of your styles a little.
Here an example: jsfiddle. In this example the container div has a set width of two images plus margins, and the images are floating left within.
jsfiddle example
You can set your bottom margins and align your left column images with the float property in your CSS:
img {
margin-bottom: /*your margin*/;
float: left;
}
And then move the right column images to the right of the div container:
nth-child(even) {
float: right;
}
give all images a same class & define padding for it
try this
<div>
<img src="1.jpg" class="myimage"/>
<img src="2.jpg" class="myimage"/>
<img src="3.jpg" class="myimage"/>
<img src="4.jpg" class="myimage"/>
</div>
CSS
.myimage {
display:block;
padding:2px 2px 0 0;
}
I have a problem with how my nested divs behaves with line breaks. I have tried searching for this, but to no avail, since the problem is hard to put in words.
I have four divs nested as indicated below, all with display inline-block:
-------- ---------------------------
| menu | | content holder div |
| div | | ----------- ----------- |
| | | | content | | content | |
| | | | div 1 | | div 2 | |
| | | | | | | |
-------- | ----------- ----------- |
---------------------------
Now, the menu div and the content divs have flexible width that depens on the data loaded. When either content div gets too wide, I want the following to happen:
-------- ----------------------
| menu | | content holder div |
| div | | ----------- |
| | | | content | |
| | | | div 1 | |
| | | | | |
-------- | ----------- |
| ------------------ |
| | content div 2 | |
| | | |
| | | |
| ------------------ |
----------------------
But instead I get the following:
--------
| menu |
| div |
| |
| |
| |
--------
---------------------------------
| content holder div |
| ----------- ----------------- |
| | content | | content div 2 | |
| | div 1 | | | |
| | | | | |
| ----------- ----------------- |
--------------------------------|
It is very confusing when the menu div is tall enough to hide that any content was loaded whatsoever. Also, keeping the menu div width fixed would only be considered as a definite last resort. The divs could however be made floats instead of inline-blocks, if that would help.
Does anyone know a simple way to keep the layout as in fig. 2? I have tested that this still happens when either content div would fit as in fig 2 if the other content div was invisible.
edit:
http://jsfiddle.net/pzHhL/1/
Easy and simple add max-width for you div "content holder div", i could give you the numbers but you didnt give a jsfiddle.
Switching them to floats would help to keep the layout you're looking for
http://jsfiddle.net/duncan/pXdDy/
giving the inner content divs
min-width:48%;
margin:1%;
float:left;
would sit them beside each other until the content gets wide enough to push them down
How to set css so that the content was in the middle but one div like this:
EDIT:
+----------------------------+
| MONITOR |
|
| +----------------+ |
| | CONTENT | |
| +-----------------------|---------------+
| | | |
| | IMAGE TO THE RIGHT | REST OF IMAGE |
| +----------------+------|---------------+
| | | |
| | CONTENT | |
| | MIDDLE OF | |
| | SCREEN | |
| | | |
| | | |
+----------------------------+
EDIT 2:
I do not want the horizontal scroll. Image hiding must simply hide behind right side.
How to do it?
.content {
width: 400px; /* whatever fixed width */
min-height: 500px;
margin: 20px auto;
}
You can see the live demo here: http://dabblet.com/gist/2730694