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.
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!
My webpage has a footer with 4 separate footer cols. They are separated by a 5px margin on the right and left side. They also have a green background. The Footer (containing element) has a red background but does not appear. I validated the HTML and could not find a problem with XHTML markup so I'm assuming it's a CSS woe.
Fiddle:
http://jsfiddle.net/48dk6/
Footer CSS declarations.
/* footer and descendants */
#footer {
font-size:1.3em;
margin-top:10px;
clear:both;
background-color:red;
}
/* footer col styling/positioning */
.footerCol {
background-color:green;
width:180px;
float:left;
margin:10px 5px 10px 5px;
}
Add overflow:auto to your #footer CSS:
#footer {
font-size:1.3em;
margin-top:10px;
clear:both;
background-color:red;
overflow:auto;
}
jsFiddle example
This will restore the behavior you seek, which is caused by the children .footerCol divs being floated. Floating those child divs removes them from the normal flow, so the parent behaves as if there is nothing for it to contain.
Add overflow: auto; to #footer.
When you float items inside a block element you often want to use overflow: auto or else the enclosing element gets whacky and won't show up unless you specify a height and width (which you usually don't want to do)
#footer {
font-size: 1.3em;
margin-top: 10px;
clear: both;
background-color: red;
overflow: auto;
}
In fact, you should have a height set for your footer, see jsFiddle
height:240px;
JSFiddle:
http://jsfiddle.net/48dk6/6/
Remove the floating and simply display the elements as inline-blocks
.footerCol {
background-color:green;
width:180px;
display: inline-block;
margin-left: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
The containing floats problem can be solved with 2 approaches:
Adding something with clear after the floats (the most common solution is clearfix with clearing pseudo element).
Making the container create new Block Formatting context. The most popular ways are setting to the container overflow:hidden/auto, display:table, display:inline-block (+ width, if necessary), or floating the container itself.
All approaches have their advantages and limitations, so choose what fits better in your case.
There is a proposal to add min-height:contain-floats value to solve this, but it isn't supported by browsers yet.
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
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.
I have 2 div: one parent and one child. User can add this div with button click and they set the text value. I want to display these dives in border inline-block(3 items in 1 row, like new tabs in chrome). And I want to display this text in the center of border.
There is css code:
.parentDiv {
width: 300px;
height: 200px;
margin: 5px;
border: solid 1px black;
display: inline-block;
font-size: 24px;
}
.childDiv {
text-align: center;
vertical-align:middle;
}
Here's a jsfiddle to show you a solution: http://jsfiddle.net/nfLu3/
.parentDiv {
...
line-height:200px;
text-align:center;
}
.childDiv {
display:inline-block;
line-height:1;
}
the keys are:
set the line-height of the parent container to its height (200px) and the text-align to center. So some text appears exactly in the middle of your box.
set the child container to be display as inline-block. In this way it's oriented at the text around (it's important!). The text around (I mean the line breaks and spaces before the child container) has a line-height of 200px and the child block has vertical-align:middle, so it will be centered.
there you go