I have a div that I would like to have a bottom border.
This can be see at http://jsfiddle.net/R5YN2/
What causes the border to not be placed right at the bottom?
Your container element isn't accounting for the floated elements and is basically collapsing.
Give it the property overflow: auto and it should work:
#recurring-header-wrapper {
display: block;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
overflow: auto;
}
Demo: http://jsfiddle.net/R5YN2/14/
Also, go easy on the class names. You can have selectors that target classes inside of elements:
#recurring-header-wrapper .label
Which matches only .label elements inside of the recurring-header-wrapper element. No need for huge class names.
If you float things you have to clear as well.
Read this: http://www.positioniseverything.net/easyclearing.html
This is what you're looking for. Add the class .clearfix to your wrapper-div (#recurring-header-wrapper).
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
It is displayed at the bottom (it ends there, the text is overflowing. Check that with overflow:hidden and most of the text disappear). Add a height to the div to make it the size you want.
Short answer: the float:left.
To correct that you can add overflow: auto to #recurring-header-wrapper
the floated divs inside cause this. you can clear them.
http://jsfiddle.net/R5YN2/9/
Here's the quick fix. Basically when you float left the header groups get taken out of the flow unless you clear them with something (an empty div is fine)
<div id="recurring-header-wrapper">
<div class="recurring-header-group">
<div class="recurring-header-label">Label</div>
<div class="recurring-header-item">Item</div>
</div>
<div class="recurring-header-group">
<div class="recurring-header-label">Label</div>
<div class="recurring-header-item">Item</div>
</div>
<div style="clear:both"></div>
</div>
set overflow: hidden on your recurring header wrapper http://jsfiddle.net/R5YN2/16/
Related
I'm trying to have a toolbar always aligned to the right within a DIV without adding any height. The problem I'm finding is making this work both when the box has 100% width and when the width is determined by content. The HTML looks something similar to this:
<div class="box">
<div class="title">
float right
</div>
<div class="toolbar">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
</div>
I managed to make it work in Firefox, but Chrome wraps the toolbar when there is not enough space for it instead of increasing the width of the container.
.box {
border: 1px solid #ccc;
display: inline-block;
margin: 5px 0 15px;
}
.title {
display: inline-block;
}
.toolbar {
background: #eee;
float: right;
margin-left: 25px;
}
I would like to find a single set of rules to achieve this regardless the width of the container, but I'm out of ideas unless I use some extra class to differentiate both cases. Also, I'm trying to avoid using overflow or clearfix because I don't want the toolbar to affect the height of the box.
In this fiddle I show all combinations I have tried: http://jsfiddle.net/omegak/c4y4t/2/
You can try this, This worked for me.
.title {
float:left;
}
See if this is the desired output
Updated the below css and added clearfix class to the parent div
.title {
float:left;
}
Add the following CSS and clear the floats on first Div.
.title {
float:left;
}
Here is the demo
I got it working in the end with a little hack.
I gave up on trying the title not to be float: left. Then, to prevent the box to have no height I added overflow: hidden to it. Finally, the hack consists on setting margin-bottom: -999px on the toolbar to prevent it from adding any extra height to the box.
Here is the solution: http://jsfiddle.net/c4y4t/8/
I am a relative novice in the world of CSS so please excuse my ignorance! I am attempting to use the following CSS to align two divs horizontally:
.portrait {
position: relative;
display:inline-block;
width: 150px;
height: 200px;
padding: 20px 5px 20px 5px;
}
.portraitDetails {
position: relative;
display:inline-block;
width: 830px;
height: 200px;
padding: 20px 5px 20px 5px;
}
Unfortunately, unless I remove the display: inline-block from the .portrait class and replace it with float:left the .portraitDetails div block appears underneath the first div block. What on earth is going on?
Since you provided a working example, the problem seems to be more clear now.
What you have to do is simply remove display: inline-block and width: 830px properties from the right div. Of course remember to NOT add the float property to it.
People sometimes forget what is the purpose of the float property. In your case it is the image which should have float property and the image only. The right div will remain 100% wide by default while the image will float it from the left.
HINT: If the text from the div is long enough to float underneath the image and you want to keep it "indented" at the same point then add the margin to the div with a value equal to the image's width.
The problem with display: inline-block; is that the siblings having this property are always separated by a single white-space but only if there are any white-spaces between their opening and closing tags.
If the parent container has fixed width equal to the sum of the widths of these two divs, then they won't fit because this tiny white-space pushes the second div to the next line. You have to remove the white-space between the tags.
So, instead of that:
<div class="portrait">
...
</div>
<div class="portraitDetails">
...
</div>
you have to do that:
<div class="portrait">
...
</div><div class="portraitDetails"> <!-- NO SPACE between those two -->
...
</div>
I'm trying to place a padding: 16px 0; to 3 divs floated left of each other but I'm having difficulty on how to do it.
Example:
http://codepen.io/anon/pen/ifpAs
The border-bottom: medium double red; should be 16px below the section-one-widgets.
Why isn't this working and is there a way to do this without targeting specific div ID's such as #search, #logo, #social etc. as more widgets may be placed in later on?
Thank you.
#section-one:after {
content: "";
clear: both;
display: block;
}
http://codepen.io/anon/pen/eqJBg
Since all three inner divs are floated, they are removed from the layout and your container div just gets the 16 pixel height. Adding a clear in there makes it so it works as you would expect. Similar to a clearfix implemented by a lot of reset style sheets.
[EDIT since we don't like link-only answers]
HTML
<div id="section-one">
...
<div class="clr"></div>
</div> <!--end #section-one-->
CSS
.clr {
clear:both;
}
I know this is a question asked 12324 times probably, but I still can't find any reliable answers :/
Here is a sample code:
http://tinkerbin.com/c0wqtfSa
The wrap should take auto height depending on the float image, but how? :/
Thanks a lot!!!
ps, I can't add any extra div like "clear:both", it should be a solution only with css
Try adding
Overflow: auto;
to your wrapper div, example here: http://tinkerbin.com/pxFxaNX2
Add a <div style="clear:both"></div> after your < p >
You need to clear after a floating element...
So:
<div class="wrap">
<div class="imagefloat"></div>
<p>sldkjfn asdhbf sdjlbhgls dhjbfg ljdshbfgl jsdbfgljh dsgf sgf</p>
<div style="clear:both"></div>
</div>
Use clear:both like below:
<div class="wrap">
<div class="imagefloat"></div>
<p>sldkjfn asdhbf sdjlbhgls dhjbfg ljdshbfgl jsdbfgljh dsgf sgf</p>
<div style="clear:both;"></div>
</div>
You just need to set overflow as well as width on your wrap div, e.g.
overflow:hidden
You should use the clearfix workaround. Read this: http://www.webtoolkit.info/css-clearfix.html
The css you need is:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Then just add the clearfix class to your "wrap" div
A very easy and quick fix it to make the wrap div also float. This will make it automatically change it size to all floated elements within in, so:
.wrap {
float:left;
border:1px solid #000;
width: 500px;
padding: 20px;
}
Whether this is an option for your project depends on the rest of the layout.
I have a line of text that I'm wanting to position a small graphic next to, within a full screen liquid layout. I have it working, but I'm not sure why.
The html:
<div class="wrapper">
<div class="image_container">
<img src="some_valid_url">
</div>
<div class="text">Zachary</div>
</div>
The CSS (written in sass, if you're curious about the nesting):
.wrapper {
text-align: right;
float: left;
width: 10%;
word-wrap: breakword;
}
.image_container {
margin-left: 2px;
float: right;
img {
height: 20px;
width: 20px;
vertical-align: top;
}
}
.text {
overflow: hidden;
}
What this is supposed to do is place the small graphic and the text on a single line, and the graphic be just to the right of the text. And it works, but only if the image_container div is above the text div. Flip them around and the image now sits below the text. Why is that?
It has to do with div.text being a block level element and not interacting with the floated .image_container.
When .image_container is before div.text in the markup it floats to the right and then because div.text isn't cleared or floated, it essentially ignores .image_container and goes on the same vertical line.
However when .image_container is after div.text, which is taking up 100% of the available horizontal space (because it's block level), it respects this and floats to the right, just below it.
If you put borders around both your elements, it should become clear what's happening.
It isn't really the HTML that matters, but the CSS. CSS float's still treat elements like a blocks-- a floating block element. An element with a float will basically keep one foot on the ground, where its block position is, but the rest floats in the air. CSS floats don't act like position absolutes, which totally pops it out of its block position and makes it float.
I believe the issue is your text-align in the wrapper. Text-align will actually align elements within the div as well, so if your text is listed first, text and image are going to be pushed to the right. You could probably fix this by adding "float: left" to your text class.
i have made a custom solution, it work even you put image container below or up to text
<div class="wrapper clearfix">
<div class="image_container">
<img src="http://www.netbsd.org/images/download-icon-orange.png" />
</div>
<div class="text">Zachary</div>
</div>
.image_container,.text{
float:left;
line-height:40px;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
you can see its working demo
let me know if something else is required.