I'm trying to make two divs to be one on top of another, like this:
The fiddle:
<!-- CSS -->
.table {
display:table;
}
.div1 {
display:table-cell;
vertical-align:middle;
}
.div2 {
display:table-cell;
vertical-align:bottom;
}
<!-- /CSS -->
<div class="table">
<div class="div1">
Top
</div>
<div class="div2">
Bottom
</div>
</div>
Put a wrapper element with display: table-row; in each table-cell element you want to isolate. This will stack the cells in different rows, one on top of the other.
And don't use tables for your layout ... here's why: Why not use tables for layout in HTML?
when I did the fiddle.... I came up with this (no css)
<div>
<div align='center'>
<div>
Socrates (this should be on top of his head)
</div>
<div>
<img src="http://www.mrdowling.com/images/701socrates.png"/>
</div>
</div>
</div>
Try this:
Html:
<div class="table">
<div class="align-middle">
Socrates (this should be on top of his head)
<img src="http://www.mrdowling.com/images/701socrates.png"/>
</div>
</div>
CSS:
.table {
display:table;
}
.align-middle {
display:table-cell;
vertical-align:left;
}
Related
How do I format my CSS so that the text inside "header-right" should be aligned at the bottom while my image at "header-left" is aligned at the top?
Here's my html:
<div class="container">
<div class="header-left;">
<img src="img1.png">
</div>
<div class="header-right;">
<div style="float:left;">
This text should be at the bottom.
</div>
<div style="float:left;">
This text should be at the bottom also.
</div>
</div>
</div>
Thanks.:)
From your class-naming I suppose you want both texts to the right of the image, bottom-aligned with the image?
To achieve this, apply display: inline-block to all DIVs , in addition apply display: block; to the image to avoid any space at its bottom:
.header-left,
.header-right,
.header-right div {
display: inline-block;
}
.header-left img {
display: block;
}
<div class="container">
<div class="header-left">
<img src="http://placehold.it/80x120">
</div>
<div class="header-right">
<div>
This text should be at the bottom.
</div>
<div>
This text should be at the bottom also.
</div>
</div>
</div>
BTW: Don't use a semicolon in class="header-right" (inside your DIV-tags) and similar.
You can displat the .container as a table and the .header-right and .header-left as table cells. This way, you can align the contents vertical bottom (or even top or middle)
See snippet below
.container{
display:table;
}
.header-left,.header-right{
display:table-cell;
}
.header-right{
vertical-align:bottom;
}
.header-right *{
display:table-cell;
}
<div class="container">
<div class="header-left">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSYTogPdYlS2zHfImUPfjdkO1v0793TjQMD2qjLoY7qNkqCUN_-dA">
</div>
<div class="header-right">
<div style="">
This text should be at the bottom.
</div>
<div style="">
This text should be at the bottom also.
</div>
</div>
</div>
I have this HTML:
<div class="styles container">
<h1>Styles</h1>
</div>
<div class="preview container">
<h1>Preview</h1>
</div>
I want the first div to be static. Let's say its width is to be 265 pixels. The .preview div should be next to it, but it should be responsive (by shrinking the window this div should also shrink). I tried with setting a % to this div, but still it goes below. How can I fix this?
First of all, DIV it's block element, and starts rendering from new line. There are few techniques to change the behavior. If you don't need to support IE6/IE7 you can use inline-block CSS style, e.g:
<div>
<div style="width:20%; display: inline-block;">
<h1>1</h1>
</div>
<div style="width:70%; display: inline-block;">
<h1>2</h1>
</div>
</div>
This is your solution:
HTML:
<div class="parent">
<div class="styles">
<h1>Styles</h1>
</div>
<div class="preview">
<h1>Preview</h1>
</div>
</div>
CSS:
.parent{
width:100%;
white-space: nowrap;
}
.styles{
width:265px;
display:inline-block;
}
.preview{
width:auto;
display:inline-block;
}
Hope it will solve you problem.Check Fiddle.
I'm trying to align four elements like this:
||=|| B
||A|| C
||=|| D
A is an image, and the other three elements are div tags. All elements have a class of span_2 with the following CSS:
.span_2 {
width: 50%;
display: inline-block;
}
However, this gives me the following layout:
||=|| B
||A||
||=||
C D
I know I can set float:left on all four elements, to get what I want, but I'm wondering if there is any other CSS way?
Thanks!
You could put the B C D elements in a container div with the same class span_2.
Example:
<img src="image.jpg" class="span_2" />
<div class="span_2">
<div class="span_2">B</div>
<div class="span_2">C</div>
<div class="span_2">D</div>
</div>
For correct alignment you'll need to add vertical-align: top; to the class, too.
Here's an example: http://jsfiddle.net/cCU89/1/
Here you go.
HTML
<div id="LeftHold">
<img src="#">
</div>
<div id="RightHold">
<div class="Right" id="B"></div>
<div class="Right" id="C"></div>
<div class="Right" id="D"></div>
</div>
CSS
#LeftHold{
width:100px;
height:100px;
float:left;
}
#RightHold{
width:100px;
height:100px;
float:left;
}
.Right{
width:100px;
height:25px;
}
I hope that helps!
Without Float
You can use a table! :)
I have the following webpage which works in IE7 but not in IE8;
The HTML:
<div class="content">
<div class="inner_content">
<div class="column">
<div class="widget">
1
</div>
</div>
<div class="column">
<div class="widget">
4
</div>
</div>
<div class="column">
<div class="widget">
7
</div>
</div>
</div>
</div>
<div class="footer">
<div class="inner_footer">
footer
</div>
</div>
The CSS:
.inner_content, .inner_footer
{
width:983px;
margin:auto;
padding:10px;
}
.content
{
background:#FFFFFF;
}
.footer
{
background:#BBBBBB;
}
The problem:
For some reason the footer div goes underneath the content div in IE8 but not in IE7. How do I get it to look the same in IE8 as it looks in IE7? The IE7 look is how I want it to look.
jsFiddle:
http://jsfiddle.net/GgpaP/
You need to contain the floated .columns inside .inner_content.
One way to do this is to add overflow: hidden: http://jsfiddle.net/thirtydot/GgpaP/3/
This will also make it work in modern browsers.
Add clear:both to footer...
DEMO
Also slight modification has been done for container.
Add display:inline-block to your content-class (in css).
I'm trying to apply some CSS to the last .topic-wrapper div (which is inside the entry-content div):
<div class="entry-content">
<div class="bbp-pagination">
<h2 class="dark-title">Top Topics</h2>
<div class="topic-wrapper">
<h4></h4>
<div class="topic-wrapper">
<h4></h4>
<div class="topic-wrapper"> <!-- I'm trying to get this one -->
<h4></h4>
<div class="mainbar">
<div class="bbp-pagination">
with this code: .entry-content div:last-child
But it seems like the CSS is being applied to some divs inside .topic-wrapper.
Like:
<div class="topic-wrapper">
<div class="topic-left">
<h2>
<span>
<span class="bbp-topic-started-in">
<div class="bbp-topic-tags"> <!-- this one -->
<p>
Any suggestions to solve this?
</div>
Unless I'm misreading your nesting you can't. :last-child finds elements that are the last child of their parents, but the last child of entry-content is bbp-pagination.
Additionally .entry-content div:last-child finds ALL divs that are descendants of .entry-content - NOT just the direct child.
You probably want .entry-content>div:last-child which looks only at immediate descendants. (i.e. children, but not grandchildren)
This should do it, using ">" gets you just the direct descendents:
.entry-content > div:last-child
Here is an example:
<div class="container">
<div class="outer">
<div class="inner"></div>
</div>
<div class="outer">
</div>
<div class="outer">
</div>
<div class="outer">
</div>
</div>
.container
{
width:300px;
background-color:yellow;
}
.outer
{
width:100px;
height:100px;
background-color:red;
margin:20px;
}
.inner
{
width:50px;
height:50px;
background-color:pink;
margin:5px;
}
.container > div:last-child
{
background-color:blue;
}
/* uncomment this statement to see the alternative broken version*/
/*
.container div:last-child
{
background-color:green;
}
*/
You can view the example on jsfiddle