This is the current setup:
<div id="youtubelatestnews">
<div class="box youtubebox">
</div>
<div class="latestnews">
</div>
<div class="clear"></div>
</div>
But the problem is the container <div> which is "youtubelatestnews" has too much space at the bottom.
Here's the site: http://voila.easywebprojects.com/
The <div>s I'm referring to are the sneak peek & Latest News portion.
The reason for the extra space is the clear div, which will clear below the elements on the left also.
You can remove the clear div, and use overflow: hidden; on the #youtubelatestnews div. As you don't have a height specified for it, the overflow style will only make the element contain its children.
Try to add float:left; style to youtubelatestnews div, it worked for me ;-)
The margin-bottom on .box-product > div plus the margin-bottom on .box are combining.
The extra space can be caused by the default height of clear item sometimes,
Try to add height:0px for the clear .
https://jsfiddle.net/8zpt7tm3/
Related
This is driving me mental.
Why wont my third div (content-col-text) not go up on float right?
It stays aligned to the gallery-thumb-container? I need it to go to the right and up and align with large-image-container - this is where the outer div wrapper is (entry-content)..
I dont have any weird margin stuff going on even..
Your order is not correct. You need to change it as below for it to work.
Below is the code:
The HTML:
<div class="large-image-container"> </div>
<div class="content-col-text"> </div>
<div class="gallery-thumb-container"> </div>
The CSS:
.large-image-container{float:left; width:66%; background:red;}
.gallery-thumb-container{float:left; width:66%; background:yellow;}
.content-col-text{float:right; width:31%; background:green;}
The Fiddle demo:
DEMO
Usually, under such circumstances, when you use a clear:both;, the floats get corrected and it works properly.
Hope this helps.
your gallery-thumb-container has probably been forced down as it floats left and there's no more space to the right of large-image-container.
You could try switching the order of the <div>'s and put content-col-text second instead of third
Another option would be to position it absolutely, but that will take it out of the flow of the document...
See JSFIDDLE here.
As the parent-parent node of pink div, the blue div included the css style overflow:hidden, which is essential in my project for other parts of content.
But now I have to show the pink square across the border, it seems a part of it was overlapped because of it parent's overflow:hidden. What should I do if I want to make it?
Thanks!
This is not possible. If you declare overflow:hidden on an element, all child elements have to obey this rule.
What you can do is to move the box out and position it accordingly:
<div class="paper">
<div class="container">
</div>
<div class="box">
</div>
</div>
Remove to you parent class .papaer overflow:hidden and
add this css
.paper:after{
content:'';
overflow:hidden;
display:table;
}
Demo
I'm getting some strange whitespace between two divs I have.
Each div has the css property display: inline-block and each have a set height and width.
I cannot find where the whitespace is.
Here is a Fiddle
You get whitespace there because you have whitespace inbetween the divs. Whitespace between inline elements is interpreted as a space.
You have:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div>
<div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
Change for:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div><div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
However, this is a bad way to do what you want to do.
You should float the elements if thats what you want to do.
Use:
float:left;
clear:none;
In both div
If you want to retain your coding layout, avoid floats and keep each div on it's own line entirely...
<div id="leftSide">Some content here</div><!--
--><div id="rightSide">Some more content here</div>
Only add this to your CSS
h1 {
padding:0;
margin:0;
}
Space between div is only due to h1 Margin and Padding
This does the trick:
<div id="left_side">
...
</div><div id="right_side">
...
</div>
Notice how the right-side div starts immediately after the closing tag of the left-side div. This works because any space between the elements, since they are now inline, would become a space in the layout itself. You can mirror this behavior with two span elements.
Demo.
You can also add display: flex; to the divs' parent container (in this case, body). Fiddle.
best way is settings parent element's font-size to 0 then normal font-size to child elements inside that parent (otherwise inherits zero from parent)
Floated both of the elements left, also made the 30% width into 40% to fill all the space, but this isn't necessary. Please be aware, "inline-block" isn't supported by IE7 but can be fixed with a workaround.
http://jsfiddle.net/RVAQp/3/
Move these statements onto the same line:
</div><div id="right_side">
Tried using float instead of "inline-block", no problems. Just changed the display:inline-block to:
#left_side {float: left;}
and
#right_side {float: right; margin-right: 10%}
No apparent problems. Could be wrong.
Don't know why but I resolved this problem by adding border: 1px solid red;(vertical) and float: left;(horizontal) to related DIV style statement and white-spaces removed.
Parent div set to font-size: 0px and chiilds to wanted size like 17px :)
Please check out this image
<body>
<div class="main>
<div class="left">blah blah </div>
<div class="right">blah blah </div>
<div style="clear:both"></div>
</div>
</body>
CSS part:
.main{min-width:1200px}
.left{width:400px ; height:auto ; float:left }
.right{width:auto ; height:auto ;float:left }
I hope friends, you have got an idea from the image. Please help me.
I am dynamically inserting data into right div and when its width exceeds 800px, it comes down the left div. But instead of that I want a horizontal scrollbar to view the content. One solution may be, removing float:left from right div. But still it causes problem.
on floated elements, height:auto means the height of the content (the default for floated elements). try with height:100%
In this example http://jsbin.com/inoka4 no width is defined for parent element
if i want to wrap red boxes in container border.
then we can make this in 5 ways
to giving float also to <div class="container">
overflow:hidden or overflow:auto
any clearfix hack to <div class="container clearfix">
Giving height to <div class="container">
adding one more html element (for example another div or <br >) after 2
boxes in <div class="container"> enter code hereand give
clear:leftor:bothor:right` to that
element
my question is any other option except float do not make any changes in <div class="container"> and inner boxes width. but if we use float:left or right to parent box then it's shrink the whole box and inner-boxes as well.
Why?
example link: http://jsbin.com/inoka4
Edit: My question is not about which method i should use, the question is why Float shrink the width
I think the better option is to use overflow:hidden. It is a simple one line change and it works.
div#container {
...
overflow: hidden;
}
Adding extra divs for clear fix requires changes in html for something that is really css. Alternatively, when using clear fix by doing hacks like...
div:after {
content:....
...
}
your css just gets bigger and messier. But it still is a good option (especially when you need to have things that overflow the box)
Reference:
http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/
If you dont' use float on the container it's width is set to 100%. If you add a floating, it only takes the space it needs. In this case the width is calculated by the two divs inside.
To wrap the red boxes in the container border there is not other option except adding float to the container. The only other option would be to absolutely position all the elements but in this case you have to know the width and height of all elements in advance. So that really isn't an option.
So my advice is to use float on the container and add a clear: both on the element after the container.
Your best bet is to always clear your floats. Just after you close the div with class .right, and just before you close the div with class .container, add a new div like this:
<div class="clear"></div>
.clear is just {clear:both;} in your stylesheet. That's what I use all day long, and works like a treat.
The final markup would be:
<div class="container">
<div class="left"> ... </div>
<div class="right"> ... </div>
<div class="clear"></div>
</div>
Edit: Just like your last example, apparently. :)