I never have any luck with CSS. I have a dialog which is displayed when the user clicks a button. In this div there is an image, and 2 other divs (containing more elements).
It should all look like the following.
The second columns which contained "Applied Filters" should be on the right of the image, and span the width between the end of the image, and the end of the main container. But instead, it has gone under the image.
See JSFiddle here
Here is the HTML:
<div class="filter_dialog">
<img src="data/images/20140206/0/emma-watson-hot-43.jpg" width="550px" />
<div class="applied_filters">
<p>Applied Filters</p>
</div>
<div class="filters">dsadsa</div>
</div>
CSS:
.filter_dialog {
background-color:#333333;
border:solid 1px #666666;
display:inline-block;
margin:0 auto;
border-radius:15px;
}
.filter_dialog img {
border-radius:15px 15px 0px 0px;
float:left;
}
.applied_filters {
float:left;
background-color:#1a1a1a;
width:100%;
}
.filters {
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
display:inline-block;
}
You'll need to set a fixed width on the two filters divs. I'd suggest wrapping them in one div with the fixed width, set to float: right, and then float the image left.
You'll need to define widths on the .filter-image and .applied-filter DIVs. See this JSFiddle for an example:
<div class="filter-dialog">
<div class="filter-container">
<div class="filter-image">
<img src="http://aerodesign.okstate.edu/projects/kittyhawk%20page/A_dragon.png" />
</div>
<div class="applied-filters">applied</div>
</div>
<div class="filter-options">options</div>
</div>
100% width means 100% width of the nearest relative/absolute positioned PARENT so no that is not the way to do it.
Solutions:
A) The width of the "Applied Filters" and the image-width are always the same => add it a proper width so it could fit next to each other. could be done like:
img{ max-width: 75% } /*or proper px*/
.filterClass{ width: 24%; } /*or proper px*/
B) The image size is not fixed => use a javascript framework like jQuery to count the current image size and change the .filterClass's width like $('.filterClass').css('width', countedWidth);
Related
I have an issue and I can't find the right keywords on Google.. But it seems prettry "classic".
I have a webpage, let's say with a max-width of 1500px;
I want to add a line, with 5 "boxes" (div) of the same size each, separated with a margin.
So I set a width of 20%, and a margin-right of 10px. My issue is that my last div always goes down to the next line, because of the margin. (Because with the margin, the width of my line is higher than the max-width of the page).
If I remove the margin, all the boxes are correctly on the same line.
What should I do to make it work ? (Except using outerWidth of jQuery, it is my next step if I can't do it easily with css)
Here is my code the code I have now :
<div id="page">
<div id="numbers">
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
</div>
</div>
#page
{
max-size: 500px;
background-color:grey;
}
.number
{
background-color:white;
}
.numberwrap
{
float:left;
width:20%;
padding-right:10px;
}
I also made a fiddle, to test : http://jsfiddle.net/jKMp5/
Thank you !
Solution : I just have to set the padding property on the .number, not the wrapper !
Or use box-sizing !
Thanks to everybody
Div's with a width percentage adds margins and paddings width on to that.
Meaning a div with width 50% amd margin-right: 20px; will be 50% + 20px.
You can do the following.
<div style="width: 20%;">
<div style="margin-right: 20px;"></div>
</div>
That will sort it out.
or just the following
.number
{
background-color:white;
padding-right:10px;
}
.numberwrap
{
float:left;
width:20%;
}
The problem is (as you already said) that the margin is affecting to each div making it bigger than that 20%, so one solution could be to tell to that div that the margin is included in the total width with the property box-sizing
So add:
.numberwrap {
box-sizing: border-box;
}
See jsFiddle example: http://jsfiddle.net/jKMp5/2/
In the default box modal,
The padding area extends the content area with the empty area between the content and the eventual borders surrounding it.
You can change this behavior using box-sizing property by applying box-sizing:border-box
border-box:
The width and height properties include the padding and border, but not the margin.
.numberwrap
{
box-sizing:border-box;
/*other styles*/
}
Demo
You can use disaply:table and display:table-cell:
css
#page
{
max-size: 500px;
background-color:grey;
}
.number
{
background-color:white;
}
.numberwrap
{
float:left;
width:20%;
padding-right:10px;
display:table-cell;
/*border: 1px solid black;*/
}
#numbers{
display:table;
}
fiddle
To describe my item- I have a div element which grows in size if more content is added- also the parent div grows in size as it should be.
Then I have 2 div elements one floated left and the other on the right. I set height to 100% but that don't work. How could I achieve such behavior?
http://109.91.124.194/nucleareducated_2/index.php
This is a typical problem that unfortunately does not have a simple solution. Do a quick Google search for equal height columns and you will see what I mean. Your code is not working because height:100% does not work unless the parent container has a specified height to calculate what 100% is. Without a specified height set, then height:100% defaults to height:auto and you end up with divs that do not expand to the size of the parent.
As you have probably guessed, it's pretty hard to set the height of the parent div because it changes. The answers include setting the height dynamically with Javascript, or more often than not, just faking it so that it appears that the columns expand to the size of the parent.
IMO the best way is to use the css table attribute if you only care about newer browsers, it does not work on IE7 or older.
#containerdiv {
display:table;
}
#childdivleft, #childdivcenter, #childdivright {
display: table-cell;
}
The next best is to use large values for padding and a corresping negative margin on the bottom of the child containers.
#leftdiv,#rightdiv {
padding-bottom: 32767px;
margin-bottom: -32767px;
}
You can also use -
jQuery - Columns of Equal Height with JQuery
several other solutions - CSS - Equal Height Columns?
let me know if this is what you are looking for: tested in chrome*
<html>
<head>
<style>
html, body {
height:100%;
}
</style>
</head>
<body>
<div style="clear: both; height:100%;">
<div class="pageShadow" style="background-color: blue; height: 100%; width: 47px; float: left;"></div>
<div class="pageShadow" style="background-color: blue; height: 100%; width: 52px; float: right;"></div>
<div class="pageShadow" style="background-color: green; margin-left: 47px; margin-right: 52px;"></div>
</div>
</body>
</html>
Maybe this is what you mean? You can add a div around the left and right div if you want an area with 100% height.
CSS:
* { margin:0; padding:0 }
#around { background:yellow; float:left }
#left { float:left; width:40%; background:red }
#right { float:right; width:60%; background:green }
#bottom { clear:both; background:blue }
HTML:
<div>
<div id="around">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="bottom"></div>
</div>
sir,
i created a div tag in my html page and that displays a product.inside the product_box div i have two columns (lleft and right) using float.
both columns fit in the product_box dividing the container into two vertical halves.but when i type content in the right half the content comes out of the div if it is longer than one line.i want that i continue typing multiple lines and it fits inside the right half.
i dnt want the overflow:scroll; method or hidden as well coz the scroll bar looks very bad.
plz suggest a way to acheive this.
CSS:
#content_left .product_box {
margin-right: 10px;
}
.left {
float:left;
padding:10px;
width:178px;
height: 174px;
}
.right {
float:left;
padding:10px;
text-align:left;
width: 396px;
height: 136px;
}
HTML:
<div class="product_box">
<h3>Product Title</h3>
<div class="left">some content here</div>
<div class="right">
jhkdjfhkjhkjhkjhkhkhkhkjhkjhkjhkjhkhkhkh
</div>
<div class="cleaner"></div>
</div>
You can use min-hieght instead of height to ensure it gets minimum height and grows if the content increases...
and be sure too add float clearer like: <div style="clear:both"></div> after the floating divs... in order to make parent container take its height
Add an element at the end of your div with the style clear:both; ( and maybe height:1px; )
I got headache how to make my fluid content will float to right.
left sidebar is fixed size.
right content is fluid size.
Here and example my html and css
How to make my id="content" will float on right?
Set a margin and remove the float/width on #content, like so:
HTML:
<div id="wrapper">
<div id="sidebar">Sidebar</div>
<div id="content">Content</div>
</div>
CSS:
#wrapper {
width:400px;
overflow:hidden;
padding:10px;
}
#sidebar {
float:left;
width:100px;
}
#content {
margin: 0 0 0 100px;
}
div {
border:1px solid #333;
}
http://jsfiddle.net/HWMJc/1/
There is actually an even easier solution to this which i discovered not too long ago. Works well back to IE7. The #fluid div will slide up next to the fixed fix and take up the remaining space while maintaining great fluidity for all responsive sites. Dont need put a float or width on the fluid div at all.
http://jsfiddle.net/HWMJc/874/
#sidebar {
float:left;
width:100px;
}
#content {
overflow:hidden;
}
You should set it to be:
sidebar{ width:100px; float: left}
Don't use 100% width on #content.
70% works, but there is a small gap between the two elements. You can adjust it to make it fit better though.
This is what I'm trying to do:
Example http://img689.imageshack.us/img689/5761/cssautowidth.th.jpg
(Larger image.)
When the <nav> element is present in the design, I want it to look like the example below. Is it possible to do this while the #content div has got a percentage value set? I'm just curious to see whether this is possible without using two different styles for the #content (both with different width values.)
Just floating doesn't seem to do it.
The reason I want the #content to have a percentage value in the first example is because I have a background image in #body that creates the illusion of an outer glow.
Edit: I just removed the need for using the width percentage by using margins instead.
Check the example here: http://css.maxdesign.com.au/floatutorial/tutorial0816.htm
What you should do is to set float:right and width on your <nav> element, and leave #content without any float or width, just set margin. This way content will try to occupy all given space and wont 'fall' into navigation.
Then, if you hide <nav> element, content will automatically resize (but also you will need to remove padding from the right).
This is example code:
<style type="text/css">
#container { width:700px; margin:0 auto; border:1px solid #000; }
#nav { display:none; }
.double #nav { width:10%; float:right; display:block; }
#content { margin-right:10%; border-right:1px solid #000; }
</style>
<div id="container" class="double">
<div id="nav">nav content</div>
<div id="content">page content</div>
</div>
Now, if you removed class="double" from container element you will see content is correctly resized to take 90% of given space. If you want to take 100% - just add .double before #content in style.