I have a div which wraps a number of images that are generated dynamically. I don't know how high the list of images is. My problem is the div that contains the dynamically generated images doesn't behave like it is housing any content - I want it to extend to the height of the list of images. Each image is itself wrapped in a div.
This is the wrapper div:
.block { padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; }
This is the markup dynamically generated for (one of) the images:
<div class="block">
<div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="45.jpg" BORDER="0"/></div>
.....
How do I get the block div to extend down with the images?
Thanks
The problem you're observing happens when you float an element, which takes it out of the normal flow of the elements (by normal flow I mean the way the elements would appear with no styling). When you float an element, the other elements still in the normal flow will simply ignore it and do not make room for it, which is why your block div does not extend the full height of your image.
There are a few different solutions:
1) Add the rule overflow: hidden; to the block class:
.block { overflow: hidden; padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; }
2) Add a element after your image that clears the floating:
<div class="block">
<div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="images/login1.png" BORDER="0"/></div>
<div style="clear: both;"></div>
</div>
Both will work, but I prefer the first solution.
REMOVE float:left from Image style and height:Auto from block style
ADD display:inline-block; in block style (container style)
I had the same problem. I got the wrapper element to wrap the content by setting the wrapper element's display to "table". So for your situation try
.block {padding:10px; margin-top:10px; height:auto; background- color:#f9f9f9; display: table;}
Add this in your CSS file:
.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .group {display: inline-block;}
/* Hides from IE-mac \*/ * html .group {height: 1%;} .group {display: block;} /* End hide from IE-mac */
And add the "group" class to your block div so the float is cleared:
<div class="block group">
...
Add the following code in your css:
.block::after{
content : '';
clear : both;
display : block;
}
It will solve your problem.
It just inserts a blank "after" the block class.
I have a div tag that expands (horizontally and vertically) depending what I have in it. I have:
<div id="summary" style="float:right;margin:5px 5px 0;" ALIGN="right">
I also put a table within it to hold all my information:
<table style="margin-left:1em; border:2px solid #000000; background-color:#f2f2f2; padding:1px; float:center; clear:right; font-size:85%;">
Related
I am beginner to UI World, trying to style and arrange html components in one of my example, but I could not see the style applied for all the children of HTML header component. Here is what I have tried Demo in JsFiddle
.page_header_style {
border: 1px solid blue;
}
.title_style {
text-align:center;
}
ul {
list-style: none;
}
li {
display: block;
}
.user_style {
float: right;
margin-top: 0px;
}
<header class="page_header_style">
<div>
<div class="title_style">Main Title</div>
<div>
<ul class="user_style">
<li>Welcome Srk</li>
<li>Logout</li>
</ul>
</div>
</div>
</header>
I would like to see the second div i.e., Welcome message & a list in the same line of the title, keeping the title at the center.
In order to make the "title" text in the center viewport wise, you can make the "user info" as position:absolute, so it will be out of the normal content flow. See the demo below.
.page_header_style {
border: 1px solid blue;
padding: 20px 0;
position: relative;
}
.title_style {
text-align:center;
}
.user_style {
position: absolute;
top: 10px;
right: 10px;
list-style: none;
padding: 0;
margin: 0;
}
<header class="page_header_style">
<div>
<div class="title_style">Main Title</div>
<div>
<ul class="user_style">
<li>Welcome Srk</li>
<li>Logout</li>
</ul>
</div>
</div>
</header>
JSFiddle Demo: http://jsfiddle.net/wt5f81qz/
You should apply float: left to the .title_style, and put a clearing element (clear:both) on the bottom of inner content of .page_header_style
Here: http://jsfiddle.net/r1af39at/
Kosturko answer regarding clearfixes
You can alternatively use the clearfix solutions with is better than adding clear:both to an element, because in some case you'd need extra markup to apply clear:both.
The both clearfixes are applied to the immediate parent containing the floating elements.
Clearfix 1: is just to apply overflow:hidden; this works but can cause styling issues if say you wanted something to flow outside the parent using position absolute for example.
The better clearfix is to use the micro clearfix, best applied using a CSS preprocessor.
Good luck
By default, div elements have the display: block; attribute. Without other css styling, browsers will render them below the last block element. Try using the display: inline-block; as this will treat each div as an inline element, but treat its contents as the contents of a block element.
For example, the following css will display the main title and both list elements on the same line.
li{
display: inline-block;
}
div {
display: inline-block;
}
See w3schools's page on the display property for more on this.
I want to center the #nav div on the page. Inside I want the other divs to stay on the same line together separated by my 10+10px margin as is so far. I don't want the inside divs to collapse on separate lines while shrinking the page too small..
http://jsfiddle.net/tH2cc/789/
<iframe width="100%" height="300" src="http://jsfiddle.net/tH2cc/789/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
http://jsfiddle.net/tH2cc/789/embedded/result/
Try this:
Take out float:left from the embedded divs
Add white-space:nowrap; display:inline-block; to your container div
Here's modified version: http://jsfiddle.net/9e4hX/
Just set the #nav div to have a fixed width (the total width of the contained elements) and set display to block. Then clear your floats after the elements to keep the #nav div surrounding them. Don't use table-cell as the display.
CSS
#nav { display: block; width: 416px; }
HTML
<div id="nav">
<div id="bark"></div>
<div id="profile"></div>
<div id="read"></div>
<div id="write"></div>
<div style="clear: both;"></div>
</div>
Try this
#nav{
padding:10px;
background-color:rgb(77,77,77);
display: inline-table;
vertical-align:middle;
width: 70%;
margin-left: 15%;
}
check this fiddle
change your container div to display: table not table-cell and add margin: auto
http://jsfiddle.net/3j5kc/
#nav{
padding:10px;
background-color:rgb(77,77,77);
display: table;
margin: auto;
vertical-align:middle;
}
I have 5 images that I want to put next to each other, these images is going to become a slider that's going to slide left or right. No matter what I try nothing seems to make it go next to each other. I have tried float:left, position:absolute, display: inline.
here is my html
<div class="slider-wrapper">
<div class="slider">
<div class="portfolio-overlay">
<div id="portfolio_0" class="portfolio-active portfolio-single"><img src="images/image1.jpg"></div>
<div id="portfolio_1" class="portfolio-inactive portfolio-single"><img src="images/image2.jpg"></div>
<div id="portfolio_2" class="portfolio-inactive portfolio-single"><img src="images/image3.jpg"></div>
<div id="portfolio_3" class="portfolio-inactive portfolio-single"><img src="images/image4.jpg"></div>
<div id="portfolio_4" class="portfolio-inactive portfolio-single"><img src="images/image5.jpg"></div>
<div id="portfolio_5" class="portfolio-inactive portfolio-single"><img src="images/image6.jpg"></div>
</div>
</div>
and this is my css
.slider-wrapper {
padding: 25px 0 0;
}
.portfolio-single {
float: left;
width: 70%;
}
DEMO WITH ANIMATION
DEMO
.slider-wrapper {
overflow:hidden; /* to remove page scrollbars */
padding: 25px 0 0;
white-space:nowrap;
font-size:0; /* to remove ~4px whitespace */
}
.portfolio-single {
/*reset fontsize if needed*/
display:inline-block;
width:70%;
}
.portfolio-single img{
vertical-align:top;
width:100%;
}
Without using align-left we can use on a parent element white-space as nowrap, this will make sure to prevent wrap on inner inline or inline-block elements.
As said above we than need to respectively set the slides to inline-block.
using inline-block on elements they'll be in an inline flow, which means that if in your HTML you have every slide in a new line, a 4px (it's a whitespace!) gap will appear next to each slide.
to remove it use on the parent element font-size:0;
If you plan to have text inside your slides than you'll need to set font-size:16px back to your children slides.
vertical-align:top or any other align value makes sure to place your images at the right vertical place inside their parent containers.
It's because you gave each image a width of 70%. So each image was taking up a new line.
If you have 5 images, then the max width to have them all on the same line would be 20%. But with any padding/border/margin will add to that, so you might need to put under 20%.
http://jsfiddle.net/rNa9v/1/
.portfolio-single {
float: left;
width: 10%; /* changed to 10% instead of 70% */
}
Your img are in divs so they each take the full width of the page.
You can change this behavior by making the divs "inline":
.portfolio-single {display: inline-block;}
http://jsfiddle.net/9377D/2/
.portfolio-single {
float: left;
width: 16%; /* 100/6 */
}
You can calculate it ;-)
Here you can change the div option.It could solve the problem.
for further assistance follow the link.. : http://www.w3schools.com/css/css_align.asp
I've been searching for hours but I can't find a way to place 2 div's next to each other.
The below example works fine when the div's are smaller then the screen but when they are bigger then the screen they are below each other.
Also I would like the same classes for 2 pages:
1 page they both fit on the screen and I'd like to display them next to each other (not one on the left and one on the right)
the other page together they are bigger then the screen. (Sideways scrolling is no problem)
Take this example:
<style>
.wrapper
{
border:1px solid Red;
display: inline-block;
}
.left
{
float:left;
color: Green;
border:1px solid Green;
}
.right
{
float:right;
color: Blue;
border:1px solid Blue;
}
</style>
<div class="wrapper">
<div class="left">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="right">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="clear" />
</div>
In the actual design ASDF is replaced by a big <table>.
As I said above I've been searching for hours but can find a solution so I'm sorry if this has been asked before.
The wrapper div isn't necessary for the two to be lined up, but if you have it for other reasons (like a border, background, etc.), then it does not need to be set to inline-block.
Nothing technically needs to float. inline-block has the same effect and is more appropriate. Having said that, one float is needed to make things as fluid as possible and will be mentioned in a second.
Something that makes this and other css magic involving inline-block tricky and error-prone is that the element is treated in some ways like an inline element and in other ways like a block. This is not cross-browser consistent. Generally, this means that it can have block-level styling (like border, and width), and inline-level styling. Generally people just think of it as blocks that fall horizontally, "in a line". But inline element properties from a wrapper div such as font-size and white-space come in to effect as well (which is just annoying).
Having said all of that, here is the bare-bones recipe for side-by-side block elements that exceed the browser window and are inside of a block-level wrapper:
The inner blocks need to be set to inline-block.
The outer wrapper needs to have white-space set to nowrap, just as if you wanted a long line of text to expand horizontally beyond the browser window.
The outer wrapper needs to be set to float: left; clear: both;, because otherwise the wrapper's width will not go past the window width. The alternative is to set the width of the wrapper, but if you don't know how far it will expand, the float will force the wrapper to automatically shrink or grow to the width of it's contents. The clear:both prevents the floating from affecting any surrounding elements.
So for the following HTML:
<div class="wrapper">
<div class="left">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div>
<div class="right">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div>
</div>
You would need the following CSS as a bare minimum:
.wrapper {
white-space: nowrap;
float:left;
clear: both;
}
.left, .right{
display: inline-block;
}
And then, for your example, you would add:
.wrapper {
border: 1px solid red;
}
.left
{
color: Green;
border:1px solid Green;
}
.right
{
color: Blue;
border:1px solid Blue;
}
Demo: http://jsfiddle.net/crazytonyi/jTknm/
This is one approach that could be used, coupling white-space: nowrap in the parent .wrapper element with display: inline-block in the child .left and .right elements:
.wrapper
{
/* other stuff */
white-space: nowrap;
}
.left
{
display: inline-block;
/* other stuff */
}
.right
{
display: inline-block;
/* other stuff */
}
JS Fiddle demo.
You can do this without floating by setting the inner divs to display: inline-block and letting the outer div have white-space: nowrap:
<div class="wrapper">
<div class="left">left</div><div class="right">right</div>
</div>
.wrapper { border: 1px red solid; white-space: nowrap }
.wrapper div { display: inline-block; width: 70% } /* 2*70% = 140% of .wrapper */
See it in action.
Be careful to not leave any whitespace between closing the first and opening the second div, because that will manifest as visible space in the render.
Erm, you need to use float:left for both them to begin with. Then force overflow:show for the wrapper or perhaps use the newer CSS 3 property overflow-x:scroll. Let me know if it still doesn't work.
Okay I have tested for you. The reason why this is not working is because you haven't specified fixed widths and some other stuff. Here is the working code:
<style>
.wrapper
{
border:1px solid Red;
width:100%;
overflow-x:scroll;
}
.left
{
float:left;
width:500px;
color: Green;
border:1px solid Green;
}
.right
{
float:left;
width:500px;
color: Blue;
border:1px solid Blue;
}
</style>
<body>
<div class="wrapper">
<div class="left">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="right">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="clear" />
</div>
Then if you want to specify widths, either use Javascript to determine them on page load or use CSS.
Your divs need widths, try:
<div id="left"><p>Some content here...</p></div>
<div id="right"><p>Some content here...</p></div>
<style>
#left, #right { float:left; color: Green; border:1px solid Green; width:49%; }
#left { margin-right:1%; }
</style>
Can you force a container DIV height to accomodate two floated div children? Is there a fancy trick I can use to do that? I am trying to make two equally sized divs inside the parent div. I would like them to appear side by side with a little whitespace between them. Child2 tends to pop out and go below Child1. Note Child2 contains a table. Should I be floating?
HTML:
<div id="parent">
<div id="child1"></div>
<div id="child2">
<table><tr><td>content</td></tr></table>
</div>
</div>
CSS:
div#parent
{
background-color: #C6E4E0;
border: solid 3px #017E6F;
font-family: Arial;
font-size: 10pt;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
width:99%;
}
div#parent div
{
width:49%;
float:right;
padding:3px;
}
div#parent div:first-child
{
float:left;
}
This is not a clearfix issue guys, his problem is that his two floated divs are not appearing side by side.
First of all, you do not need to set the width of the parent div, divs are block elements which means they automatically adjust their width to take up the full width of their parent (in this case, presumably the parent of div#parent is the body).
Because you are setting the width explicitly AND giving it padding, it can potentially extend BEYOND the body. That doesn't really matter, but if you apply this same knowledge to the child floated divs and you can see why the right one might get bumped down to the bottom.
First, if you are explicitly setting the widths of the divs to a percentage, you do not need to add padding. Because you are dealing with percentage widths, it is better to add padding to the content of the divs rather than the divs themselves, because padding is ADDED to the width. Therefore, if you added 10px padding to a div that had a 49% width in a 100px parent, it would have a width of 49px + 10px + 10px (2 sides) for a total calculated width of 69px.
Since you didn't post your markup and content or which browser you are testing in, I can't say exactly why the div is being bumped down. There are two likely possibilities.
You are using IE, which allows tables to extend beyond its parent div which will cause breakage. Try explicitly setting the table width to a percentage of its parent or something like that.
The 49% width + padding = greater than [parent-width] - [left-div-width]. This will cause it to get bumped down because the left div and right div are too wide for the parent width.
I use the clearfix class.
.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 */
then just use the class in every floated-element container.
#container { width:200px; }
.floated { width:100px; float:left; }
.clear { clear:both; }
<div id="container">
<div class="floated">A</div>
<div class="floated">B</div>
<div class="clear"></div>
</div>
I am not a fan of clear: both;, I rather do this in Jonathan Sampsons example:
#container { width:200px; overflow: hidden; }
.floated { width:100px; float:left; }
<div id="container">
<div class="floated">A</div>
<div class="floated">B</div>
</div>
By the way, you want
div#parent > div { float:left; }
instead of
div#parent div:first-child { float:left; }
which is still not IE6 friendly, but it will float both child DIVs.