Sorry for the bad title.
So I have 2 divs both with float:left property inside a container with fixed size. Each div can have optional size. Problem is if I fill div2 with a lot of text it goes below div1, but they should be next to each other. I want div2 just become smaller, not go below div1.
Check example on JS Fiddle:
Try
.div2 {
float: none; /* default value */
overflow: hidden;
}
Demo
One way is to nix the floats and use display:table-cell instead:
.div1 {
border:1px solid red;
display:table-cell;
}
.div2 {
border:1px solid blue;
display:table-cell;
}
jsFiddle example
Set a max-width for div2. Since you set no size for div2, when the length of text hits the edge of its parent element it drops down the next line. max-width will allow it to be dynamic in size until it hits the limit.
.div2 { max-width: 250px; }
jsFiddle Example
If you want both div should be of
Equal hight
Always on left and right
then use
.div1 {
border:1px solid red;
display: table-cell;
}
.div2 {
border:1px solid blue;
display: table-cell;
}
http://jsfiddle.net/w5h5H/8/
set a max-width on both divs as a percentage. Heres a fiddle: http://jsfiddle.net/w5h5H/10/
The percentages may need adjusting down a little to allow for any margins or borders you have.
Related
I have a main div that contains two other divs. I need that the first one must have the same height of the parent div. The parent div height is not specified in CSS.
Here's an example: http://jsfiddle.net/x8dhnh4L/
The pink div must expand to the full height of the parent (red border).
One solution I tried is using display:flex, but it's not IE-friendly (I need a IE8+ compatibility). Plus I'd like to achieve this with CSS only, so I'm avoiding JS.
You could try using a table layout:
set display:table on the parent
set display:table-cell to the childs that need the same height
#container {
position: relative;
width:600px;
border: 1px solid red;
display:table;
}
#content {
display: table-cell;
background-color:pink;
width:400px;
}
#side-bar {
display:table-cell;
background-color:yellow;
width:170px;
padding-left:25px;
vertical-align: top;
}
here's a working fiddle:
http://jsfiddle.net/x8dhnh4L/2/
As noted in the comments, margins do not work in elements with display:table-cell. If acceptable, you can use padding-left instead of margin-left...
You could also add an additional <div> to separate the 2 columns by 25px.
http://jsfiddle.net/x8dhnh4L/1/
Set side bar to
float:right;
and set content
height:100%;
A quick solution is to use display:table for #container and height:100% for #content.
http://jsfiddle.net/afelixj/x8dhnh4L/5/
If you actually want the "#content" div to expand to "#container" height, you need to set a height for parent div "#container" and height and float for "#content"
#container {
position: relative;
width:600px;
border: 1px solid red;
height: 800px; //whatever height you need
}
#content {
display: inline-block;
background-color:pink;
width:400px;
height:100%;
float: left;
}
This way "#content" height will adjust to "#container" height, but "#side-bar" will take the height it needs to show it's content.
With Hanoncs solution the parent div "#container" will adjust to child's div "#content" height.
An easy way around this is using display: table; declaration on the parent element and display: table-cell; declaration on the child element.
I would recommend reading Equal Height Columns with Cross-Browser CSS and No Hacks.
Hope this helps!
I would like to create a div (within a main wrapper for a website) to contain 2 div to fill in the previously mentioned div. I have actually done this already....but my problem is that the 2 smaller divs dont align nor stay fixed in the main div. How is this even possible if they are confined to a main div?
Here is what I have done so far and there this issue is present: http://jsbin.com/tifuhute/17/
The text and the map (both with black borders) should be in the red box (which is the main div) and shouldnt move under no circumstances.
The sizing is a little off. (#column1 (300px) + #column2 (900px) = 1200px not 1198). Use box-sizing:border-box; to make it easier
#container {
width:1200px;
...
}
#column1 {
width:300px;
box-sizing:border-box;
...
}
#column2 {
width:900px;
box-sizing:border-box;
...
}
http://jsbin.com/tifuhute/18/
Your divs have fixed width and height. Your container is 1198px wide, while your inner divs sum up 1200px, thus wrapping as they don't fit in their parent's 1198px width.
Give both your divs "display: inline-block". This will make them line up side by side as long as their width is not greater than that of the red box.
#text{
display: inline-block;
width: 30%;
#map{
display:inline-block;
width: 69%;
}
You will want to float the inner divs.
Because div elements display as block they won't follow each other horizontally in-line. Using float will put them next to one another.
Don't forget to account for the border width of each inner element so they fit inside the wrapper. In the below example the larger div has a width of 646px instead of 650px because 4px were used for the right and left border of the inner div's combined.
<div id="wrapper">
<div id="small-div"></div>
<div id="large-div"></div>
</div>
#wrapper{
width: 900px;
height: 300px;
padding: 0;
margin: 0;
border: 1px solid red;
}
#small-div, #large-div{
float: left;
border: 1px solid #000;
}
#small-div{
width: 250px;
height: 300px;
}
#large-div{
width: 646px;
height: 300px;
}
JSFiddle example
I am trying to move the text .col-6 .about to the right of the image but nothing is working.
Here is my code:
http://jsfiddle.net/M4rDD/
CSS
.mainInfo
{
height:500px;
background-color: pink;
}
.col-6 .imagePlaceholder
{
float: left;
width:300px;
height:420px;
margin:30px 0 30px 30px;
background-color: red;
}
.col-6 .about
{
display: block;
margin-left:100px;
padding:1em;
}
try using css parameters such as :
position:absolute
for the objects you need to move, and then values as left:00px and right:00px.
Use position:relative for the main wrapper div.
p.s. i rarely use margin value for div, because it's interpreted on different ways across different browsers.
because the floated red div is taken out of the document flow and although the text surrounds the floated red div, the margin is still calculated against the parent col-6 which has the width of 100% (display:block) of the mainInfo). So you have to set the margin-left larger than the width of the floated red div (which is 300px). In this case you may have to set the margin-left to 400px:
.col-6 .about {
display: block;
margin-left:400px;
padding:1em;
}
I added this answer to show that the margin-left still works. You can also set the margin for the floated red div instead (like JunM posted as a comment).
Here is the updated demo.
I have several divs inside another div (let's call it container) and I was wondering if it possible to extend the width of a child div to go beyond the width of the container div.
It's easier to explain if you could take a look at this jsfiddle.
Currently, the container div has the width of 80% and so do all the child divs. I want to extend the width of the first div to 100% so that it completely fills the page horizontally.
How would I achieve this?
By the way, the reason I want to do this because I use the grid structure provided by this and it requires that eveything must be included inside a container div in order to get the features provided by the structure.
EDIT: I just realized the width of the container div is specified in px, and not in % as in the jsfiddle example. So setting the width of the child div to 120% does not guarantee to fill the page horizontally. How should I approach my problem? The only way I can think of right now is to get the width of screen in px, but I don't think that is possible in CSS.
I wouldn't do this but it seems to work:
#greendiv {
width:120%;
margin-left:-10%;
background-color: green;
}
See the Fiddle.
Why can't the #greendiv be before the .container or some other wrapper div?
Edit. Turn you thinking upside down (not really, just make a custom container inside mandatory container, here the .yellowdivs are custom containers and the #greendiv is the full width container inside container):
.container {
width: 100%;//or some amount of pixels and the yellow divs follow that setting
margin: 0px auto;
}
.yellowdiv {
width:80%;
margin-left:10%;
border: solid 1px;
background-color: yellow;
}
#greendiv {
background-color: green;
}
See the Fiddle.
If the parent container is centrally-aligned, you can use negative margins on both left and right sides:
#greendiv {
background-color: green;
margin: 0 -12.5%;
}
See fiddle here - http://jsfiddle.net/CtsTQ/12/
Add overflow:visible to your parent div which is .container.
.container {
width: 80%;
margin: 0px auto;
overflow:visible;
}
#greendiv {
background-color: green;
width:500px;
}
LIVE DEMO
Well I got what you asked for by doing this:
#greendiv {
background-color: green;
width: 140%;
margin-left: -20%;
}
But this is not a good practice I think...
Its usually not a good idea to extend stuff beyond wrapper containers but if I had to do it I would most definitely use relative positioning like this.
#greendiv {
position:relative;
left:-10%;
width:120%;
background-color: green;
}
You could also use other units like px to achieve more precise results.
I have a div with a height of 100% and a solid border. when i have too much content, it will display outside the div border.
how do i expand the div to the height of all the content inside the border instead of just 100% of the screen size?
the height:100% seems to be measuring the screen height but not the content inside of it.
<style>
#container{
height:100%;
width:100px;
border:1px solid black;
}
</style>
<div id="container">
link to problem sample page
Such a problem can be easily solved using the elusive clearfix! First off, remove all those height:100%; declarations you have for your #container, they're not needed, and try this in your CSS:
#container:before, #container:after {
display: table;
content: "";
zoom: 1;
}
#container:after {
clear: both;
}
absolutely positioned elements do not change the height of their container. Your farbartastic element has absolute positioning, so it will be laid out without informing its container of its height requirements.
You have some problems with yours floating element (which are flying outside the container), so , for correct this use overflow:hidden in the container
#container{
width:100px;
border:1px solid black;
overflow: hidden;
}