I'm building a responsive page that has an image and <div> side by side:
The width and height of the image retain their proportions and expand/contract with the browser window.
The width of the <div> does the same, but I'd like it to match the image in terms of height.
Is there any way of achieving this? Here's a Fiddle of the problem: http://jsfiddle.net/alecrust/xwJHw/
You can use display:table property for this. Write like this:
section{
display:table;
width:100%;
}
.text-box,.image{
display:table-cell;
vertical-align:top;
}
Check this http://jsfiddle.net/xwJHw/8/
Note: display:table works till IE8 & above.
You can use jQuery.
Calculate the hight of the image using $('#imgId').height() and the set the same to Div.
Also see the code, how heights are adjusted here http://filamentgroup.com/examples/equalHeights/
EDITED:
#alecrust: This is a fine solution and also implemented in your fiddle, See Here
A pure css solution: SEE DEMO
CSS:
#wrapper {
overflow: hidden;
background: #ccc;
}
.placeholder_image {
float: left;
width: 430px;
height: 264px;
background: #fff;
padding: 0 20px 0 0;
}
.placeholder_text {
background: #ccc;
margin-left: 450px;
display: block;
}
HTML:
<div id="wrapper">
<div class="placeholder_image">
<img src="http://www.qesign.com/templates/designs/christmas-after-effects-animated-e-card-template-31966.jpg" alt="" />
</div>
<div class="placeholder_text">
A block of text
</div>
</div>
I''m looking to move an image of a saw in between two borders so it is looks likes this.
I believe I have centered the image correctly but it appears I haven't and I am loathe to use padding if that is not right way, as I want this to be semantic as possible for a responsive design. I also need it to be placed within the two borders with one border stacked in front. Presumably I need use z-index to do that but I haven't got that far.
JsFiddle
Are you looking for something like this:
See Demo: http://jsfiddle.net/rathoreahsan/Fcn96/
Hi Played with positioning and tried to make the results as per your referred image requirement. I hope this will help you.
CSS
#logo-container .saw {
left: 50%;
margin: 0 auto;
position: relative;
top: 46px;
}
#tag-container {
border: 2px solid #00AC9D;
height: 150px;
margin-bottom: 5px;
position: relative;
width: 1140px;
}
see the demo:- http://jsfiddle.net/RJVXE/16/
You need to utilize both z-index and positioning.
.line
{
height:1px;
width:100%;
background:#000;
position:absolute;
left:0px;
}
.item1
{
top:5px;
z-index:5;
}
.item3
{
top:25px;
z-index:15;
}
<div style="width:100%; position:relative">
<div class="line item1"></div>
<div style="position:absolute; top:0px;left:50px;z-index:10">
<img src="saw.png" />
</div>
<div class="line item3"></div>
</div>
(example uses both inline & blocked CSS references only for brevity. Stay away from inline CSS).
You could tryo what AlphaMale suggestes here: How to center image in a div horizontally and vertically
Before your image include a 'span' tag. Then add this properties to 'saw' class:
#logo-container .saw {
text-align: center;
margin-bottom:-50px!important;
}
The !important is to override margin: 0 auto that actually has.
http://jsfiddle.net/2EKWS/1/
I have that problem: I want to have a centered layout with or without a right-side sidebanner (it should float right to the content). so my css has to center content+sidebanner IN CASE there is a sidebanner tag or just the content (content and sidebanner have a fixed width) if there is no sidebanner tag - there are some pages where there should be the sidebanner and on some it isn't. css should format both possibilities well.
so it should like this:
<div id="wrapper"><div id="content"></div><div id="sidebanner"></div></div>
i tried a couple of things with floats and display:inline but it didn't really work out :(
Try this...
#wrapper {
position:relative;
left:50%;
margin-left:-500px;
width:1000px;
}
margin-left should be negative half of the width.
For the sidebanner, when its there, you can add a class .wsidebanner to the content block as follows:
<div id="content" class="wsidebanner"></div>
and the css would be:
#content {
background-color:#199;
}
.wsidebanner {
float:left;
width:800px;
}
#sidebanner {
background-color:#919;
float:right;
width:200px;
}
i would use following
#wrapper {
width:1000px;
margin:0 auto; //centering the wrapper
position:relative; //so we can position the ad absolutely
}
#sidebanner {
width:120px;
position:absolute;
top:0;
right:-120px; // same as width
}
Since selecting an element's parent is not possible with CSS, you'll have to add a class to the wrapper div when there's no sidebar.
HTML
<div id="wrapper">
<div id="sidebanner">...</div>
<div id="content">...</div>
</div>
<div id="wrapper" class="nosb">
<div id="content">C</div>
</div>
CSS
#wrapper {
width: 400px;
margin: 0 auto;
}
#wrapper.nosb {
width: 300px;
}
#content + #sidebanner {
margin-right: 100px;
}
#sidebanner {
float: right;
width: 100px;
}
See fiddle.
Note: IE6 doesn't support the adjacent sibling selector.
I have a container on my test site:
#container {
margin: 0 auto;
}
Then I added the left vertical menu and on some small screens that menu is not fully visible.
Like my old laptop :-)
I want to keep the margin:auto setting in place but I want to move the whole #container a little bit to the right.
Could it be done some how?
I have tried #container {margin-left:10px;}, but to no avail.
Playing with firebug, it's good to use:
#container {
margin: 0 auto;
position:relative;
left:10px;
}
Hope it solves...
The simplest approach would be to introduce another element (or style another element if it's already available). Thus, you might have:
<div style="margin-left: 10px;">
<div id="container" style="margin: auto;">...</div>
</div>
That way the centering is being done within a container div that's already got the appropriate left-hand padding.
If you wrap your #container div in another div with double the left margin, that will work.
#wrap {
margin-left: 20px;
}
.centre { /* this would be your #container */
width: 100px;
height: 40px;
margin: auto;
background-color: #f00;
}
#wrap .centre {
background-color: #00f;
}
The HTML:
<div class="centre"></div>
<div id="wrap">
<div class="centre"></div>
</div>
http://jsbin.com/emogu3
I have been attempting to split a div into two columns using CSS, but I have not managed to get it working yet. My basic structure is as follows:
<div id="content">
<div id="left">
<div id="object1"></div>
<div id="object2"></div>
</div>
<div id="right">
<div id="object3"></div>
<div id="object4"></div>
</div>
</div>
If I attempt to float the right and left divs to their respective positions (right and left), it seems to ignore the content div's background-color. And other code that I have tried from various websites doesn't seem to be able to translate to my structure.
Thanks for any help!
This works good for me. I have divided the screen into two halfs: 20% and 80%:
<div style="width: 20%; float:left">
#left content in here
</div>
<div style="width: 80%; float:right">
#right content in there
</div>
When you float those two divs, the content div collapses to zero height. Just add
<br style="clear:both;"/>
after the #right div but inside the content div. That will force the content div to surround the two internal, floating divs.
Another way to do this is to add overflow:hidden; to the parent element of the floated elements.
overflow:hidden will make the element grow to fit in floated elements.
This way, it can all be done in css rather than adding another html element.
None of the answers given answer the original question.
The question is how to separate a div into 2 columns using css.
All of the above answers actually embed 2 divs into a single div in order to simulate 2 columns. This is a bad idea because you won't be able to flow content into the 2 columns in any dynamic fashion.
So, instead of the above, use a single div that is defined to contain 2 columns using CSS as follows...
.two-column-div {
column-count: 2;
}
assign the above as a class to a div, and it will actually flow its contents into the 2 columns. You can go further and define gaps between margins as well. Depending on the content of the div, you may need to mess with the word break values so your content doesn't get cut up between the columns.
The most flexible way to do this:
#content::after {
display:block;
content:"";
clear:both;
}
This acts exactly the same as appending the element to #content:
<br style="clear:both;"/>
but without actually adding an element. ::after is called a pseudo element. The only reason this is better than adding overflow:hidden; to #content is that you can have absolute positioned child elements overflow and still be visible. Also it will allow box-shadow's to still be visible.
For whatever reason I've never liked the clearing approaches, I rely on floats and percentage widths for things like this.
Here's something that works in simple cases:
#content {
overflow:auto;
width: 600px;
background: gray;
}
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
background: white;
}
#left { float:left; }
#right { float:right; }
If you put some content in you'll see that it works:
<div id="content">
<div id="left">
<div id="object1">some stuff</div>
<div id="object2">some more stuff</div>
</div>
<div id="right">
<div id="object3">unas cosas</div>
<div id="object4">mas cosas para ti</div>
</div>
</div>
You can see it here: http://cssdesk.com/d64uy
Make children divs inline-block and they will position side by side:
#content {
width: 500px;
height: 500px;
}
#left, #right {
display: inline-block;
width: 45%;
height: 100%;
}
See Demo
You can use flexbox to control the layout of your div element:
* { box-sizing: border-box; }
#content {
background-color: rgba(210, 210, 210, 0.5);
border: 1px solid #000;
padding: 0.5rem;
display: flex;
}
#left,
#right {
background-color: rgba(10, 10, 10, 0.5);
border: 1px solid #fff;
padding: 0.5rem;
flex-grow: 1;
color: #fff;
}
<div id="content">
<div id="left">
<div id="object1">lorem ipsum</div>
<div id="object2">dolor site amet</div>
</div>
<div id="right">
<div id="object3">lorem ipsum</div>
<div id="object4">dolor site amet</div>
</div>
</div>
Best way to divide a div vertically --
#parent {
margin: 0;
width: 100%;
}
.left {
float: left;
width: 60%;
}
.right {
overflow: hidden;
width: 40%;
}
Pure old school CSS
I know this post is old, but if any of you still looking for a simpler solution.
#container .left,
#container .right {
display: inline-block;
}
#container .left {
width: 20%;
float: left;
}
#container .right {
width: 80%;
float: right;
}
If you don't care old browser and need a simple way.
#content {
display: flex;
}
#left,
#right {
flex: 50%;
}
Floats don't affect the flow. What I tend to do is add a
<p class="extro" style="clear: both">possibly some content</p>
at the end of the 'wrapping div' (in this case content). I can justify this on a semantic basis by saying that such a paragraph might be needed. Another approach is to use a clearfix CSS:
#content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#content {
display: inline-block;
}
/* \*/
* html #content {
height: 1%;
}
#content {
display: block;
}
/* */
The trickery with the comments is for cross-browser compatibility.
This is best answered here Question 211383
These days, any self-respecting person should be using the stated "micro-clearfix" approach of clearing floats.
Make font size equal to zero in parent DIV.
Set width % for each of child DIVs.
#content {
font-size: 0;
}
#content > div {
font-size: 16px;
width: 50%;
}
*In Safari you may need to set 49% to make it works.
Divide a division in two columns is very easy, just specify the width of your column better if you put this (like width:50%) and set the float:left for left column and float:right for right column.