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.
Related
I am currently trying to pick up css. It's going okay so far, however I am having an issue I haven't had a problem with until now.
I have a <div> containing two further <div>'s.
I expect the "parent" <div> to act as a parent (automatic height, etc.) and actually "contain" the two child <div>'s.
My code:
<div class="formpair">
<div class="formlabel formitem">
Parent Section:
</div>
<div class="formcontrol formitem">
<select>
</select>
</div>
</div>
My CSS:
.formitem {
position: relative;
float: left;
}
.formlabel {
width: 200px;
}
.formcontrol {
position: absolute;
left: 200px;
}
.formpair {
clear: both;
margin-bottom: 4px;
height: auto;
position: relative;
display: block;
}
I have tried experimenting with "position" and "display" but to no avail...
any help appreciated!
Unless there is a specific need to have the child elements floated, I have provided a different solution using display:inline-block. I have also cleaned up your CSS to remove some unnecessary bloat that may cause hierarchy problems later in your document.
You can see a working example of the fix here: JSFiddle
Here is the css that works properly to display as you need it to:
.formitem {
display:inline-block;
}
.formlabel {
width: 200px;
}
.formpair {
margin-bottom: 4px;
}
Here are a few of the problems you had with your previous CSS:
.formcontrol {
position: absolute;
left: 200px;
}
This piece of CSS was being countered by:
.formitem {
position: relative;
float: left;
}
And so .formcontrol was not having any effect on your document because of the countering CSS. The reason it was countered out is because CSS is linear and reads your document from start to finish. In your HTML you first told the CSS to apply .formcontrol and then immediately after you gave it the second class .formitem:
<div class="formcontrol formitem">
Other CSS declarations like:
height: auto;
position: relative;
display: block;
Did not seem to be needed in your example, as the default settings will work perfectly fine for this application, and imposed possible restricting declarations on your elements that could cause problems down the line with future CSS modifications.
If your intention was to use float:left, then #rdubya commented with this link on how to properly clearfix underneath floated elements: clearfix
A parent container does not expand to the height of the floated child elements.
The simplest way to do this way is to add a clearing div to clear the floating divs and get the parent to expand.
HTML
<div class="formpair">
<div class="formlabel formitem">
Parent Section:
</div>
<div class="formcontrol formitem">
<select>
</select>
</div>
<div class="clear"></div>
</div>
CSS add...
.clear {
clear: both;
}
http://codepen.io/anon/pen/ByzJbY
A modern trend to clear floats is to use pseudo elements on the container div:
in this way you reduce the markup an obtain the clearfix-result
.container:after {
content:'';
display:table;
clear: both;
}
Moreover optimizing such technique you get to Nicolas Gallagher's micro-clearfix-hack
in this version you'll also find a :before pseudo element to avoid top-margins from collapsing.
This is the mainstream most popular solution!!
I have a chat widget that I am adding some styling to. However I am having difficulty making the "user" chat bubbles align to the right of the screen.
When I use float right, with float left(for the other side) the divs no longer position correctly, in that they seem to just go to the right of the relative divs.
I would like it to also be able to append div's that will cause the overflow-y to create a scroll bar. Which without the float is already working as expected.
Below is the current version in a jsbin.
http://jsbin.com/utulay/1/edit
TLDR; trying to get the .chat-bubble-user divs to align to right of screen without float.
if you don't want use floats, just try with inline-block, like so:
#chatWindow {
text-align: right;
}
.chat-bubble-user {
display: inline-block;
text-align: left;
}
JsBin (tested on Fx20): http://jsbin.com/awimev/2/edit
You can use float:right on the user messages and put a clearfix div after each one:
http://jsbin.com/utulay/2/edit
<div class="chat-bubble-user">
<div class="chat-bubble-glare-user"></div>
<p>I have a question about kittens?</p>
<div class="chat-bubble-arrow-border-user"></div>
<div class="chat-bubble-arrow-user"></div>
</div>
<div class="clearfix"></div>
CSS
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
.clearfix {
display: block;
}
it has been a problem for sometime until.
You only have to use
text-align:right;
display-inline:block;
all in the parent member;
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/
I'm wondering what the best way to go about doing this is...
I have 3 divs:
a div#container with width=100%; that holds 2 inner divs
a div#inner_left with width changing dynamically, but no wider than 200px (will hold a product image)
an div#inner_right where the width should fill the rest of the space in the container (will contain text to describe the product shown)
#container {
width:100%
}
#inner_left {
display:inline-block:
max-width:200px;
}
#inner_right {
display:inline-block;
width:100%;
}
The problem is that the div#inner_right creates a line break and fills the entire width. How can I make them align next to each other, with the right div accounting for the width taken by the left div (which changes dynamically?). I've gotten this to work other ways, but I'm looking for a clean solution...
Any help for a CSS noob is much appreciated!
I haven't really seen a good solution in the answers here. So I'll share mine.
Best way to do this is by using the table-cell option in CSS. One important thing to add is a 'min-width' to the element that has a pixel width.
Example:
<div id="left">
Left
</div>
<div id="right">
right
</div>
CSS:
#left {
display: table-cell;
min-width: 160px;
}
#right {
display: table-cell;
width: 100%;
vertical-align: top;
}
Have a look at "liquid layouts" it can describe what you're talking about.
You're probably looking for this one.
In your example, try setting your display to inline. However, you won't technically be able to use block level elements in it, so have a look at the links I posted above. :)
The problem with setting the width to 100% if you're using floats is that it is considered 100% of the container, so it won't work either since the 100% includes the left div's width.
Edit: Here is the example of the other answer, I've edited it to include the html/css from the example site above for simplicity's sake.
I'll also include it below:
HTML
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
CSS
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
This can be accomplished using Flex-Box, which has been introduced with CSS3 and according to Can I use is cross-browser.
.container {
display: flex;
}
.left {
width: 100px; /* or leave it undefined */
}
.right {
flex-grow: 1;
}
/* some styling */
.container {height: 90vh}
.left {background: gray}
.right {background: red}
<div class="container">
<div class="left">100px</div>
<div class="right">Rest</div>
</div>
So even though I wanted to do this with CSS only, I ended up just using tables...
Use floating:
#container{
width:100%
}
#inner_left{
float:left;
max-width:200px;
}
#inner_right{
float:left;
width:100%;
}
Edit: have a read a this, it's a nice little guide : quirksmode
you need to provide position:absolute style property to both your div's
This is based on #w00 's answer. +1 friend.
My situation was when I wanted to show a couple of icons next to a label. I use the fluid class for that which is where the nowrap comes in. This is so the icons appear on the same line.
.sidebyside-left-fixed, .sidebyside-right-fixed
{
display: table-cell;
width: 100%;
}
.sidebyside-left-fluid , .sidebyside-right-fluid
{
display: table-cell;
vertical-align: top;
white-space: nowrap;
}
Here is an easy method to achieve this, and this is something that's quite frequently needed. It's also tested to works with all browsers, including the very old ones (let me know if it doesn't on any).
Link to a sample: https://jsfiddle.net/collinsethans/jdgduw6a/
Here's the HTML part:
<div class="wrapper">
<div class="left">
Left Box
</div>
<div class="right">
Right Box
</div>
</div>
And the corresponding SCSS:
.wrapper {
position: relative;
}
$left_width: 200px;
.left {
position: absolute;
left: 0px;
width: $left_width;
}
.right {
margin-left: $left_width;
}
If you are not using any CSS preprocessors, then replace the $left_width with your value (200px here).
Credit: This is based on http://htmldog.com/examples/pagelayout2/.
There are several other useful ones there.
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.