I have 2 divs, each has a background image and I want them to line up side by side. But for some reason they are coming up vertically, whereas I want them horizontally.
Code for both the divs is below. How can I fix this?
#header
{
top: 40px;
width:310px;
height: 90px;
background: url(Images/logo.jpg) no-repeat;
}
#logo
{
top: 40px;
left: 3200px;
height: 100px;
background: url(Images/banner.jpg) no-repeat;
}
<div id="header-container">
<!-- stick your HTML here -->
</div>
#header-container { overflow:hidden; zoom:1; }
Modify your css to add these properties:
#header { float:left; }
#logo { float:left; width:[the width] }
This assumes they are siblings and they aren't inside of each other.
<div id="header-wrapper">
<div class="header">hello</div>
<div class="logo"></div>
</div>
and ur css:
/* this width = .header + .logo + any left or right padding on them.. or it can be 100% */
#header-wrapper {width: 1000px;}
.header {background: url(Images/logo.jpg) no-repeat; width:500px;height:90px;float:left;}
.logo {background: url(Images/banner.jpg) no-repeat;width:500px; height:90px;float:left;}
That should work also, havent tested so let me know if it doesn't
Related
I have what seems to be a simple css question but having difficulty achieving. I have 2 divs that sit one on top of the other. I would like the combined height of both divs to be 100% but the top to be a static defined height. The bottom div will contain a list of data that will overflow to scroll. What is the best way to achieve this? Below is sample code for something close.
#container{
height:auto;
height:100%;
min-height:100%;
}
#top{
height:175px;
min-height:175px;
max-height:175px;
}
#bottom{
height:70%;
}
<div id="container">
<!-- top div set to 100px -->
<div id="top"></div>
<!-- bottom div dynamic height based on remaining real estate -->
<div id="bottom"></div>
</div>
You could use CSS calc(), so #bottom {height:calc(100% - 175px);}.
html, body {
height:100%;
margin:0;
}
#container {
height:100%;
}
#top {
height:175px;
background:lime;
}
#bottom {
height:calc(100% - 175px);
background:teal;
}
<div id="container">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
Or use CSS table layout if you need to support more browsers.
html, body {
height:100%;
margin:0;
}
#container {
height:100%;
width:100%;
display:table;
}
#top, #bottom {
display:table-row;
}
#top {
height:175px;
background:lime;
}
#bottom {
height:100%;
background:teal;
}
<div id="container">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
You can use height:calc(100% - 175px); for this:
http://jsfiddle.net/9ygz4pnj/
html,body,#container{
height:100%;
}
#top{
height:175px;
border:1px solid red;
}
#bottom{
height:calc(100% - 175px);
border:1px solid green;
}
You can achieve this by defining a height and min-height on your containers.
First of all you need to define a height: 100% in your body (and html).
Than you need to create a container div which will be the mother of your top and bottom divs.
Than use position: relative and min-height: 100% in your container div.
You can align your top div to top: 0 and left: 0 a definite height and position absolute.
You can align your bottom div to bottom: 0 and left: 0 a calc function and position absolute. For the content scrolling part in bottom div use overflow scroll.
JSFiddle Example
Right now, I am using a french (or german keyboard) which is quite hard for me to use. I will edit the answer with a more meaningful text when I return home.
This is a basic css file that you can use.
html, body { height: 100%; margin:0; }
.container {
position: relative;
min-height: 100%;
}
.top {
background: black;
color: white;
height: 200px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
background: yellow;
height: calc(100% - 200px);
overflow: scroll;
}
Sorry if the title is confusing. Basically, I'm working on a tumblr theme where I need three adjacent divs wrapped in a fixed-width container. None of their contents are fixed, so they all have variable widths. The middle div should always be centered to the container, while the divs to the left and right will always be "touching" the middle div, and, thus, move around as the middle div's width changes (the left and right s may be images, so text-align doesn't always work). Plus, I may also need to hide the left, right, or both the left and right divs.
Here's a conceptual image:
I can obtain this using flexboxes easily (JFiddle), but flex only has 86% global support.
This is the closest I could get without using flexboxes, but I can't get that middle div (with the text) centered to the title div, while preserving the relative positions of the two images on either side: JFiddle
* {
height: 100%;
position: relative;
}
body {
height: 200px;
}
/* just to get rid of scrollbar */
p {
margin: 0;
}
.title {
background: #aaa;
height: 22px;
width: 450px;
/* for example */
margin: 0 auto;
}
.container {
background: #abc;
float: left;
}
.lr {
transform: translate(0, -100%);
}
.left {
background: green;
float: left;
}
.left img {
transform: translate(-100%);
}
.center {
background: red;
display: inline-block;
z-index: 2;
}
.right {
background: blue;
float: right;
}
.right img {
transform: translate(100%);
}
.left img, .right img {
height: 100%;
}
<div class="title">
<div class="container">
<div class="center">CENTERCENTERCENTERCEN</div>
<div class="lr">
<div class="left">
<img src="http://i.imgur.com/7bvErJN.jpg" />
</div>
<div class="right">
<img src="http://i.imgur.com/q8Mq0YZ.jpg" />
</div>
</div>
</div>
</div>
Other people have mentioned trying to display the title as a table, but that would require centering the middle cell to the whole row, and having the cells to the left and right take up the rest of the space, and I'm not sure if you can do that when their widths aren't fixed.
Anyone know of any other solutions?
If you can change your HTML then apply this:
First move the left and right elements inside center:
<div class="center">
CENTERCENTERCENTERCEN
<div class="left">
testtest<img src="http://i.imgur.com/7bvErJN.jpg" />
</div>
<div class="right">
<img src="http://i.imgur.com/q8Mq0YZ.jpg" />
</div>
</div>
Then on the CSS :
/*Keep the center container on the middle*/
.title {
text-align:center;
}
.center {
position:relative;
display:inline-block;
}
/*Position elements based on the relative center parent*/
.left {
position:absolute;
top:0;left:0;
transform:translateX(-100%)
}
.right {
position:absolute;
top:0;right:0;
transform:translateX(100%)
}
Check this DemoFiddle
Using position: absolute should help in this.
I changed your HTML to following:
<div class="title">
<div class="container">
<img class="left" src="http://i.imgur.com/7bvErJN.jpg" />
<div class="center">CENTERCENTERCENTERCEN</div>
<img class="right" src="http://i.imgur.com/q8Mq0YZ.jpg" />
</div>
</div>
CSS
.title {
background: #aaa;
height: 22px;
width: 450px;
/* for example */
margin: 0 auto;
text-align: center;
}
.container {
background: #abc;
display: inline-block;
margin: 0 auto;
position: relative;
text-align: left;
}
.center {
background: red;
}
.left, .right {
position: absolute;
top: 0px;
}
.left {
right: 100%;
}
.right {
left: 100%;
}
Working Fiddle
Updated to show OP Update
No need for flex here, why not just use percentages? Float all the containers and put the percentages as relative to the sizes you want. (50% for the middle, 25% for the outside containers).
You can use the outside containers as wrappers so you can still use a border on the inner containers without messing up the sizing. Then just float the inner containers within the outside containers (if that makes sense). The example below just floats the inner p tags to the outer containers.
This makes it always hug the inner container, while keeping relative sizes and also keeping the middle centered.
Example below:
Fiddle
HTML
<div class="container">
<div class="flexa">
<div class="left">
<p>leftleft</p>
</div>
<div class="center"><p>CENTERCENTdsfdfdERCENTsdfdfsfERCEN</p></div>
<div class="right">
<p>ri</p>
</div>
</div>
<div class="bottom">BOTTOMOMOM</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
div {
background: #aaaaaa;
overflow: hidden;
}
p{
border: 1px solid black;
}
.container {
width: 500px;
/* for example */
margin: 0 auto;
}
.right p{ /* This is what makes it work. This could be a div with class of inner or something like that. */
float:left;
}
.left p{
float:right;
}
.flexa div{
float:left;
}
.left {
width:25%;
}
.center {
width: 50%;
}
.right {
width:25%;
}
.bottom {
display: block;
margin: 0 auto;
text-align: center;
}
I have 3 divs in one row
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
here's how its layed out
I need the middle div to stay a fix width, but the left and right divs to shrink in as the screen gets smaller, heres an example
how would I write out the css?
this is how I have it so far, and by the way the 3 divs are wrapped in another div#mid
#mid {
max-width: 100%;
min-height: 395px;
max-height: 395px;
position: relative;
background-color: #F00;
display: block;
}
#left {
min-width:35%;
min-height: 395px;
max-height: 395px;
background-color: #00F;
position:relative;
float: left;
}
#middle {
min-width:30%;
min-height: 395px;
max-height: 395px;
background-color: #3F0;
position:relative;
float: left;
}
#right {
min-width:35%;
min-height: 395px;
max-height: 395px;
margin:0;
padding:0;
background-color: #0FF;
position:relative;
float: left;
}
if anyone can help me out id really appreciate it, thanks in advance!
Here I've answered this question, you can do it like this : My Fiddle
<div class="container">
<div class="first"></div>
<div class="static"></div>
<div class="third"></div>
</div>
CSS
.container {
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-align:stretch;
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-align:stretch;
display:box;
box-orient:horizontal;
box-align:stretch;
color: #ffffff;
}
div {
height: auto;
}
.first {
background-color: #546547;
}
.static {
background-color: #154d67;
width: 300px;
}
.third {
background-color: #c00000;
}
.first, .third {
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
Its very simple give fixed width to the middle div like width:300px...Hope this will be useful...
Very Simple.
Float the three divs.
Set the display property to 'inline-block'.
Set the width attribute of middle div.
Set max width attribute of the left & right div.
Here is the HTML markup I have tested with:
<body>
<div id="left">LEFT CONTENT ... LEFT CONTENT ... LEFT CONTENT ... LEFT CONTENT</div>
<div id="middle"></div>
<div id="right">
RIGHT CONTENT ... RIGHT CONTENT ... RIGHT CONTENT ... RIGHT CONTENT
</div>
</body>
Here is a sample CSS:
#right,
#left {
background-color:green;
float:left;
display:inline-block;
max-width:20%;
min-height:20px;
}
#middle {
width: 60%;
float:left;
display:inline-block;
background-color:blue;
min-height:20px;
}
And here is the implementation: http://jsfiddle.net/3yEv3/
I want the left column to be 40px. I want the center column to be 50% of the remaining viewport and I want the right column to be the other 50% of the remaining viewport.
It should look something like this:
[LEFTCOLUMN][...CENTER COLUMN...][...RIGHT COLUMN....]
[...40px...][........50%........][........50%........]
The solution presented here (link) will not work for my case as the center column can become too collapsed on mobile devices.
Thanks!
I think this may work for you:
http://jsfiddle.net/KR9zj/
Essentially the trick is to float LEFTCOLUMN, and wrap both CENTERCOLUMN AND RIGHTCOLUMN in a wrapper with overflow: hidden.
Use display:table; and display:table-cell;. No need to struggle with float:x;.
HTML:
<div id='container'>
<div id='first'>a</div>
<div id='second' class='fifty'>b</div>
<div id='third' class='fifty'>c</div>
</div>
CSS:
#container { display:table; width:100%; }
#container > * { display:table-cell; }
#first { width:40px; min-width:40px; }
#container .fifty { width:50%; }
Live example: http://jsfiddle.net/j25wK/
Will this work?
Demo: http://jsfiddle.net/BVhCZ/
As you can see, the left is absolute, and "remaining" is one block div that containing two 50% floated children. Should work for any width >~ 40px
Code:
<div class="left">LEFT</div>
<div class="content">
<div class="content-left">CONTENT LEFT</div>
<div class="content-right">CONTENT RIGHT</div>
</div>
.left {
position: absolute;
top: 0;
left: 0;
width: 40px;
background-color: #ddd;
}
.content {
margin-left: 40px;
}
.content .content-left {
float: left;
width: 50%;
clear: none;
background-color: #fdd;
}
.content .content-right {
float: right;
width: 50%;
clear: none;
background-color: #ddf;
}
I have 3 divs, all contained within a parent They are in parent-div.
Here's my HTML:
<div id="header">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
And my CSS:
#left
{
float: left;
width: 334px;
background-image: ...;
}
#middle
{
float: left;
width: ???;
background-image: ...;
}
#right
{
float: left;
width: 280px;
background-image: ...;
}
I want the #left and #right divs to have static sizes and non-repeating backgrounds. However, the #middle div should resize depending on the page size. How can I write my CSS so that the #middle div changes its with dynamically, apart from the width of the other two divs?
I think:
#left
{
float: left;
width: 334px;
background-image: ...;
}
#middle
{
margin-left: 334px;
margin-right: 280px;
background-image: ...;
}
#right
{
float: right;
width: 280px;
background-image: ...;
}
and then you will need to change the order of the DIVs slightly:
<div id="header">
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
But middle should resize due to window/page size!
Unfortunately, there is no way to express the calculation you want (width: 100%-614px) in CSS. So you have to let the width default to ‘auto’, which means ‘100% minus any margins, paddings and border’, and then use margins or padding on the middle element of the same size as the left and right elements.
Mark B suggests one approach to this using floats; you can also do it by relative-positioning the parent and absolutely positioning the left and right child elements, which has the advantage of not requiring a re-ordering of the elements.
You should be further able to absolute-position the middle element by its left and right properties as suggested by John, but this ‘edge-positioning’ technique doesn't work in IE6, so instead the middle element has to have margins in the same was as the float example.
If you are just trying to put a border image on the left and right of your element you can do that more easily using nested background images:
<div id="header"><div class="left"><div class="right">
content...
</div></div></div>
<style type="text/css">
#header { background: url(/img/header-background.gif); }
#header .left { background: url(/img/header-left.gif) top left repeat-y; }
#header .right { background: url(/img/header-right.gif) top right repeat-y; }
#header .right { padding: 0 280px 0 334px; }
</style>
something like this seems to work
#left
{
position:absolute;
top:0;
left:0;
width: 334px;
border:solid 1px red;
}
#middle
{
position:absolute;
top:0;
left:339px;
right:285px;
border:solid 1px green;
}
#right
{
position:absolute;
top:0;
right:0;
width: 280px;
border:solid 1px blue;
}
also, if you made the parent div have position:relative; these three divs would be positioned absolutely within that parent.