As the title says, I need two divs to be equally high. They should be as high as it needs to be for the content to fit. The current CSS is:
.portfolioleft{
float:left;
width:189px;
background-color: #436FAC;
min-height: 100px;
height: auto;
color: #FFF;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
}
.portfolioleft img{
border-radius: 10px;
}
.portfolioright{
float:right;
width:500px;
background-color: #436FAC;
min-height: 100px;
height: auto;
color: #FFF;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
}
.portfolioright a{
color:#FFFFFF;
}
and the html for the divs is:
<div class="portfolioleft"><img src="img" alt="img" width="189" height="311" /></div>
<div class="portfolioright">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="clear"> </div>
CSS alone cannot tackle this feat (unless you want a hack solution where you can use an image). You will need to implement a JS solution. Since the content is dynamic and you do not know how high the columns will be, you will need to access the DOM to determine the height of the tallest column then apply to the indicated columns. I use the following regularly and it works quite well and is easy to implement.
http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html
Unfortunately this is a tricky problem in CSS. If you only want to extend the background color of your left sidebar to the bottom of the section (with its height defined by the right div), try wrapping them inside a parent div (which scales to the height of the right div), then positioning the left div with position:absolute and height of 100% like so:
<div class="portfolio">
<div class="portfolioleft">...</div>
<div class="portfolioright">...</div>
</div>
.portfolio {
position: relative;
background: white;
}
.portfolio .portfolioleft {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100%;
background: #436FAC;
}
.portfolio .portfolioright {
margin-left: 200px;
}
If BOTH sides are dynamic and you need both heights to match, the only surefire way to make it work across all major browsers is to resort to a table-based layout with two columns, as karmically bad as that might be.
cell properties in your left right div
i checked your code and replace the float into display table-cell
you can check to this live http://jsfiddle.net/rohitazad/prMLh/1/
Related
I want to absolute position a div but it is not sticked to the top but has a blank space. Container has position:relative and inner block has position:absolute css rules. I tried to play with the code and noticed that changing background-position has some effect and I have no idea why.
<header>
<div class="header-wrapper">
<div class="header-slogan-1 text-center">Base info</div>
<div class="header-info">Info</div>
</div>
</header>
What I want is to have the green block at the top (see fiddle).
Here is the fiddle
Please can anyone explain the behaviour and answer why the block is shifted from the top?
It is shifted from the top, because it is relative to its parent .header-wrapper, that has a top margin. In order to get the desired result, you have to remove position: relative from its parent, therefore it will be relative to the viewport and will be placed at the top.
Edit: I realised, that he margin is actually applied to the child of the wrapper, causing margin collapsing. In order to fix this, you need apply overflow: auto to the parent element. By doing that, you can still have a position: relative on the wrapper, as it is not pushed down by the child. Take a look at the demo:
/* header block */
header {
height: 536px;
background-color: #ddd;
background-position: center;
background-size: 100% 536px;
background-repeat: no-repeat;
overflow: hidden;
}
header .header-wrapper {
position: relative;
overflow: auto;
z-index: 2;
}
.header-slogan-1 {
font-size: 32px;
font-weight: 700;
font-style: italic;
margin-top: 88px;
}
.header-wrapper .header-info {
position: absolute;
top: 0;
z-index: 3;
background-color: #4caf50;
max-width: 600px;
padding: 25px 25px 25px 75px;
color: #fff;
}
.text-center {
text-align: center;
}
<header>
<div class="header-wrapper">
<div class="header-slogan-1 text-center">Base info</div>
<div class="header-info">Info</div>
</div>
</header>
If I'm understanding this correctly, you want the header to have no space around it. If this is the case, then just add
body {
margin: 0;
padding: 0;
}
to the top of your css and you should be all set.
I changed margin-top: 88px; into padding-top: 88px; of header-slogan-1 as it does not change my layout. I have an image in wrapper class and it is centered and may exceed the container size, so I need position:relative and overflow:hidden.
Finally I decided to pick my solution. Sorry Adam for not choosing your answer.
I have two child divs (inline-block) inside a wrapper div. I want the left Div to be centered and the right one simply on the right of the left div.
<div id="Wrapper1"><div id="leftElement1">LEFT ELEMENT</div><div id="rightElement1">RIGHT</div></div>
The Problem is, if I use margin-left to reposition the whole wrapper, the Left Element is not centered on small screen sizes.
If I center leftElement1 and use position: absolute to position rightElement1 the Warpper Div does not adjust its width and height according to its children.
For a better understanding check http://jsfiddle.net/aaq810gs/6/
Any help is appreciated!
If i understand right you want something like this:
#rightElement1 {
background-color: blue;
position: relative;
width: 100px;
display: inline-block;
height: 50px;
float: right;
top: -100px;
}
Applied in your first example.
fiddle
Or something like this:
#rightElement1 {
background-color: blue;
position: fixed;
width: 100px;
display: inline-block;
}
fiddle
I am not really sure if I get exactly what you mean, but I think something like this could work for you.
- You better switch to %, because than it will work better on mobile devices.
- Second thing is adding margin:0 auto; for #leftElement1 so it stays in the middle. #rightElement2 will just stick to it on the right, because it is inline-block.
Now you can add whatever margin to the wrapper and it stays the same.
Fiddle http://jsfiddle.net/stassel/vzx6fm55/
HTML:
<div id="Wrapper1">
<div id="leftElement1">LEFT ELEMENT</div>
<div id="rightElement1">RIGHT</div>
</div>
CSS:
#Wrapper1 {
width: 90%;
background-color: red;
margin: 0 auto;
white-space: nowrap;
padding: 10px;
margin-left:10%;}
#rightElement1 {
background-color: blue;
width: 10%;
display: inline-block;
height: 50px;}
#leftElement1 {
background-color: green;
width: 60%;
margin:0 auto;
display: inline-block;}
div {
height: 100px;
text-align: center;
color: white;}
SOLVED
Thank you for all your answers! Unfortunately I wasn't able to describe my Question properly, so none of the solutions worked.
Finally I was able to solve the problem myself. The Key to the solution was another centered outer wrapper, with a fixed size of the to-be-centered Element and overflow: visible. The inner content overlaps now the outer wrapper.
#outerWrapper {
width: 700px;
overflow: visible;
margin: 0 auto;
}
#Wrapper {
width: 810px;
background-color: red;
}
http://jsfiddle.net/aaq810gs/9/
I'm building a tile-based portfolio Wordpress theme, and I can't get the tiles to center correctly in their parent div. Here's the static page (I'm migrating from .cu.cc asap). I've used inline-block to align them all on one row, and there are margin styles to keep the gaps between the tiles, but what I'm getting is this (red lines added):
I'd like to align the tiles flush to the red lines - how can I do it?
Here's a boiled down version of the HTML:
<div class="content-wrapper">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
And the CSS:
.content-wrapper{
width: 678px;
margin-top: 66px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.tile{
display:inline-block;
width: 182px;
height: 295px;
background-color: #e1e1e1;
border: solid 1px rgba(176,176,176,0);
margin-bottom: 64px;
margin-right: 35px
}
Thanks, Oliver
I'll add to Karl-André's answer by noting that :last-child is not supported in IE8, so it would be nice to switch to
.content-wrapper .tile {
margin-left: 10px;
}
.content-wrapper .tile:first-child {
margin-left: 0px;
}
Even more clever decision is to use the following:
.content-wrapper .tile + .tile {
margin-left: 10px;
}
Just three lines instead of six, elegant and works everythere.
Also, if you're bored of manually typing margin and want justify-like behaviour, consider
Fluid width with equally spaced DIVs.
Try adding this :
.tile:last-child{
margin-right : 0;
}
You div are centered, but the last div margin is messing up the elements
I want to create large button style divs in the centre of the page and for the most part, it is working. The only thing is that I want some space between them and I just can't seem to get it to work. Below is my CSS. What I have done is create 1 div called Wrapper and then created 2 more divs inside, one called topleft, the other is topright. At this stage, there are just those 2 divs, but (And the reason why the inner divs are called top) I might want to add additional divs on either the same line or perhaps the next line at a later time.
I kept reading that margin is the way to do it, but it won't work with my existing code. Is it because I am already using it in WRAPPER in order to get them centred? I had some trouble getting it to align the way I wanted and it does look the way I wanted, but I suspect my issue is because maybe I centred and aligned them incorrectly if that makes sense?
Basically, my question is how can I get some space between topleft and topright?
.wrapper {
margin: 0 auto;
width:600px;
}
.topleft {
height: 200px;
width: 300px;
vertical-align: middle;
display: table-cell;
border-radius: 15px;
background-color: rgb(0,178,219);
}
.topright {
height: 200px;
width: 300px;
vertical-align: middle;
display: table-cell;
border-radius: 15px;
background-color: rgb(134,197,73);
}
My HTML is simple:
<div class="wrapper">
<div class="topleft"> ENERGY </div>
<div class="topright"> MINERALS </div>
</div>
Check out this jsfiddle
http://jsfiddle.net/peter/YmKc4/
Updated CSS
.wrapper {
margin: 0 auto;
width:600px;
}
.topleft {
height: 200px;
width: 280px;
border-radius: 15px;
background-color: rgb(0,178,219);
float:left;
line-height:200px;
margin:0 5px 0;
}
.topright {
height: 200px;
width: 280px;
border-radius: 15px;
background-color: rgb(134,197,73);
float:left;
line-height:200px;
margin:0 5px 0;
}
When you set a line-height to the same height as your div it'll center the content vertically. And floating the divs left I think is a little better than setting their display to table-cell. You also need to reduce the width when setting a margin to account for the margins pixels on either side
your "wrapper" div is 600px, and each internal div is 300px. That leaves no room for any space?
Hi I am having problems positioning several images. It is very important that max height of the site stays at approximately 580 pixels as I want to give the impression of a picture frame around the site. I have attached a picture to show how exactly the site is laid out and where I want to position my images in the top, middle and bottom divs. I do not want to have them as background images because I want to have some as links and I want to have some jquery animations (i.e. fadeIn and toggle) with the other images. This is a fluid layout but I do not want the vertical width to expand when the browser is at the min width of 780px, I also would like that the images are some what centred on the page.
I am still learning CSS so I have done the best I can but it is still out of position.
Thanks for your help
Site Layout Picture
.container {
width: 100%;
max-width: 1096px;
min-width: 780px;
margin: 0 auto;}
.header {
background:#231f20;
height: 65px;
}
.sidebar1 {
padding: 0px;
float: left;
width: 65px;
background: #231f20;
margin: 0;
min-height: 450px;}
.sidebar2 {
float: right;
width: 65px;
background:#231f20;
margin: 0;
min-height: 450px;}
.main_content{
padding: 0px;
width: 80%;
float: left;
}
.footer {
height: 65px;
background:#231f20;
position: relative;
}
HTML
<body>
<div class="container">
<div class="header"></div>
<div class="sidebar1"></div>
<div class="main_content">
<div class="top"></div>
<div class=”middle"></div>
<div class=”bottom"></div>
</div>
<div class="sidebar2"></div>
</div>
</body>
Add position: relative to all the containing div's (you may have to set the height of them to the height of the tallest image also). Then position all the images something like:
.img1 { /* or whatever class name works for you */
position: absolute;
left: 50%; /* this centers it, if you want thirds, us 33%, 66%, etc. */
margin-right: -50px; /* note: 50px is an example, it needs to be half the width of your image width */
}
Try adding clear: both; to the CSS for the .footer. This will force it to the bottom of the "picture frame".