Is there an elegant way to align 3 elements left, center, and right on the same line?
Right now I'm using 3 <div>'s all with width:33%;float:left; and it's not working too well.
that works for me:
<html>
<head>
<style>
div.fl {
float: left;
width: 33%;
}
div.fr {
float: right;
width: 33%;
}
</style>
</head>
<body>
<div class="fl">
A
</div>
<div class="fl">
B
</div>
<div class="fr">
C
</div>
</body>
</html>
do you mean the same?
You may get strange results if there is any margin in the element you are adding it to. This is where width: 33% may not work because you will need to factor in the amount of margin that element has.
<html>
<head>
<title></title>
<style type="text/css">
div { float: left; width: 33%; margin: 4px; }
</style>
</head>
<body>
<div style="border: 1px solid #ff0000;">1</div>
<div style="border: 1px solid #00ff00;">2</div>
<div style="border: 1px solid #0000ff;">3</div>
</body>
</html>
This will cause it not work as expected because of the margin added to each div. Similarly, if you add too much of a border to each div you will get a similar result border: 5px solid !important;
As soon as you take away the margin from the above code, it should work as expected.
Try this:
<div style="float: left; width: 100px;">
left
</div>
<div style="float: right; width: 100px;">
right
</div>
<div style="width: 100px; margin: 0 auto;">
center
</div>
You need to take into account that the left and right divs do not push the container box (a div around the code above) height down, even if they have more content than the center div, the only one not floated. A clearfix will take care of this.
I created a page with all three methods for comparison at http://www.salestime.com/Ref/LeftCenterRight.html.
Float the first two left and float the third one right, while ensuring the widths will fit the line you are placing them on.
Use pixel widths if your design allows for it.
Float LeftBlock 'left', CenterBlock 'none' and RightBlock 'right'. But make sure the Center element appears last on your HTML page, otherwise it wont work.
Here is yet another varition of the theme:-
<html>
<head>
<style type="text/css">
div div {border:1px solid black}
div.Center {width:34%; float:left; text-align:center}
div.Left {float:left; width:33%; text-align:left}
div.Right {float:right; width:33%; text-align:right}
</style>
</head>
<body>
<div class="Left"><div>Left</div></div><div class="Center"><div>Center</div></div><div class="Right"><div>Right</div></div>
</body>
</html>
Note that the border is possible by using an inner div for each of the 'panel' divs. Also gives the center the remain 1% of pixels.
This works for me. I don't know if it's the most elegant, but it does do the work: it reacts well to the "cell" contents and resizing.
<html>
<head>
<style>
.a {
border: 1px dotted grey;
padding: 2px;
margin: 2px;
}
.l {
border: 1px solid red;
background-color: #fee;
float:left;
}
.c {
border: 1px solid green;
background-color: #efe;
text-align:center;
}
.r {
border: 1px solid blue;
background-color: #eef;
float:right;
}
</style>
</head>
<body>
<div class="a">
<div class="l">
</div>
<div class="r">
toto v.2 adfsdfasdfa sdfa dfas asdf
</div>
<div class="c">
item 1 | tiem 2 | asdf 3 | asdfad asd | aasdfadfadfads
</div>
</div>
</body>
</html>
Related
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 100%;
}
Please look at my code at JS Fiddle
I'm wanting to get div 1 to stretch the height of both divs 2 and 3, like you would do with table's rowspan.
I'm not proficient enough with understanding how to do table stuff in divs to figure this one out.
Thanks!
You can use the table/table-cell display css options.
UPDATED Fixed stretching issue.
<div style="display:table">
<div style="display:table-cell;height:100%;" class="div1">
1
</div>
<div style="display:table-cell;width:100%">
<div class="div2">2</div>
<div class="div2">3</div>
</div>
</div>
Link to JSFiddle: https://jsfiddle.net/pho5p7cc/8/
Here's what I would do. Create a div around all of your current div, then use css positioning to edit the lengths within the div.
Here's an example,
http://jsfiddle.net/tjgerot/v2469Leu/
<div class="table">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
</div>
I would use a container to hold your DIV 2,3. Then margin the left of the container to allow space for your DIV 1.
Im not sure it's the smoothest way to code, but it works.
https://jsfiddle.net/pho5p7cc/3/
html
<div class="div1">1</div>
<div class="container">
<div class="div2">2</div>
div class="div2">3</div>
</div>
css
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 50px;
margin-left:20px;
}
.container{
}
I've searched high and low and cannot find a solution specific to this problem. I'm trying to accomplish the following:
Have a container DIV defined with a percentage height to serve as max-size container
A secondary container DIV that provides a content size-based borde
Have a header div that is fixed at the top of that DIV
Have a list of DIVs (table-like) under the header
When the list is short, the border is reduced to size of content
When list if long (> height of outer container), scrollbar is shown for DIV list and not header.
I put together the following simplified version:
<html>
<head>
<style type="text/css">
.panel { height: 10%; border: 1px solid red; overflow: hidden; margin-top: 10px; }
.sizer { max-height: 100%; border: 1px solid blue; }
.header { border-bottom: 1px solid black; }
.scroll { max-height: 100%; overflow: auto; }
</style>
</head>
<body>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
<div>Line3</div>
<div>Line4</div>
<div>Line5</div>
<div>Line6</div>
<div>Line7</div>
<div>Line8</div>
<div>Line9</div>
<div>Line10</div>
<div>Line11</div>
<div>Line12</div>
</div>
</div>
</div>
</div>
</body>
</html>
The two red boxes should be fixed size. Check
The blue box should size to be the size of the content or size of red box maximum. Check
When contents in lower exceed red box size, scrollbar should be displayed under header. Fail
Any change I make that gets the scrollbar displayed causes the top blue box to enlarge to the size of it's container, red box. e.g., { .scroll height: 100% }
(The DIV.wrap does have a purpose - just not in this example. It is intended to provide a double-border effect on the sizer, so it should be the same size as sizer all the time).
Also, I have figured out some solutions where I used fixed (px) sizes for the DIVs, but this is not necessarily desired. Especially on DIV.panel - this must be set to a percentage height.
Not completely sure i understand the question, but if you want the scroll on the list but not on the header, have you tried:
overflow-y:scroll;
on the "scroll" div instead of
overflow:auto?
Let me know
Ok i think maybe i worked it out. I think cause you have overflow:hidden and a height on the container div, and not the variable scroll div. Just try the code below and let me know. I have added the height of 10% to the scroll div and not the overall container. Hope thats what you were looking for
<html>
<head>
<style type="text/css">
.panel { border: 1px solid red; overflow: hidden; margin-top: 10px; }
.sizer { max-height: 100%; border: 1px solid blue; display:block;}
.header { border-bottom: 1px solid black; }
.scroll { height: 10%;overflow-y: scroll; display:block; }
.scroll div {display:block; line-height:normal; clear:both; height:20px;}
</style>
</head>
<body>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
<div>Line3</div>
<div>Line4</div>
<div>Line5</div>
<div>Line6</div>
<div>Line7</div>
<div>Line8</div>
<div>Line9</div>
<div>Line10</div>
<div>Line11</div>
<div>Line12</div>
</div>
</div>
</div>
</div>
</body>
</html>
Messy headline, but i had no other way to descibe it.
what im trying to do is i have 3 boex in a line with only 1 px border at each side, but cant get it to work, it is always 2 px at the far right one. How to solve this?
Check the code:
#content {
width: 1016px;
min-height: 664px;
height: auto;
border: 1px solid #232323;
background-color: #12100e;
float: left;
padding: 0px;
}
#imagebox {
Width: 338px;
height: 221px;
padding-right: 0px;
padding-left: 0px;
border-right: 1px solid #232323;
border-bottom: 1px solid #232323;
}
<html>
<head>
<link rel="StyleSheet" href="Main.css" type="text/css">
<title></title>
</head>
<body>
<div id="mainbody">
<div id="menu"></div>
<div id="content">
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
</div>
</div>
</body>
</html>
It's because the right-hand border add's 1px to the overall width of the #imagebox element, thus making the width 339px.
Try decreasing the width to 337px and they should all fit in
Closest you can get:
http://jsfiddle.net/CGEWC/2/
Several thing you have to keep in mind:
Use classes in stead of id's if you need to assign a style multiple times.
In your CSS you use Width with a capital. Although CSS is not case sensitive it's cleaner to just write it all lowercase.
I've added a float: left; to your imageboxes
I've added first and last classes to your div. Not the cleanest code, but it should word.
Have you tried using max-width instead of width? It allows the object to be scaled down.
If need be just take 1 away from either and it should be fine and change the id's to class as they are all the same.
I have this code:
<html>
<head>
<style type="text/css">
.container {
border-bottom: 1px dotted #999999;
width:500px;
padding-left:200px
}
</style>
</head>
<body>
<div class="container">asdf</div>
</body>
</html>
And it works fine except for the fact that the bottom border is also applied to the 200px before the indent. I want the bottom border to start at 200px. Can this be done?
Use margin instead of padding or use an inner div.. (updated to match requirements disclosed in comments)
<html>
<head>
<style type="text/css">
.container {
width:500px;
padding-left:200px
}
.inner{
border-bottom: 1px dotted #999999;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
asdf</div>
</div>
</body>
This is what it should look like: http://jsfiddle.net/dKVTb/1/
If that's the case, use this:
<div class="container">
<div class="content">
content here
</div>
</div>
CSS code:
.container {
padding-left:200px;
}
.content {
width:500px;
border-bottom: 1px dotted #999999;
}
Maybe like this, with margin-left
http://jsfiddle.net/ppMmy/
The CSS padding properties define the
space between the element border and
the element content.
Thus not "padding" the whole <div>
I am making an image gallery, and I need to display images in a grid like layout. I don't want to use any frameworks, and would prefer to do things from scratch. Also, I would prefer not to use tables for the layout, since it will be a pain to add images to the table dynamically.
The layout consists of divs, like:
<div id="gallery">
<div class="uPic">
<img src="1.png">
<p> description </p>
</div>
<div class="uPic">
<img src="2.png">
<p> description </p>
</div>
....
......
....
</div>
to achieve the grid look, I simply "float"-ed all .uPics to left....and given some padding and margin to the #gallery. So far everything works great.
The PROBLEM starts, when I try to give a hover effect to the images. initially the <p> is hidden, and I use jQuery to show it on hover. but on doing so, the images below the one I am hovering over, shifts towards the right instead of moving down. Any ideas?
If the height of your divs is variable then I would recommend either using clear:both on the first element of each new row OR putting each row in its own container div. Otherwise, as you've noticed, the divs under the selected one will probably be pushed to the side of the higher div instead of shifting down.
I'd also consider Matt's solution as divs moving around on mouseover imho gives a very chaotic look to a page.
But if you're set on doing it this way, check out this example:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#gallery .image p').hide();
$('#gallery .image').hover(
function() { $(this).find('p').show() },
function() { $(this).find('p').hide() }
);
});
</script>
<style>
#gallery {
width: 800px;
}
#gallery .image {
width: 200px;
float: left;
background: #eee;
margin-bottom: 10px;
}
#gallery .image.newline {
clear: both;
}
#gallery .image .placeholder {
width: 180px;
height: 200px;
margin: 10px;
background: #ccf;
}
#gallery .image p {
margin: 10px;
background: #fcc;
}
</style>
</head>
<body>
<div id="gallery">
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<!-- NOTE the added "newline" class where the new line starts! -->
<div class="image newline">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
</div>
</body>
</html>
The w3schools has a sample image gallery all in CSS. They add a border on hover of the image.
I would maybe set the width and height of the paragraph, and fix it using absolute positioning relative to the enclosing uPic div. That way you can have the paragraph of description appear "above" the image on hover without disturbing the flow. So, add position: relative; to the uPic, add something along the lines of position: absolute; left: 0px; top: 0px; to the <p>, and then adjust other things to suit.
I suggest that you choose a fixed height and width for your div :
It may fix your problem
It is not convenient for the user when a whole part of the grid is moving just to show up a little description, whether it is downward or to the right
I think this may be helpful
<style type="text/css" ><!--
#gallery_box{
width:728px;
height:545px;
border:solid #cccccc 1px;
margin:20px auto 0px;
padding:5px;
-moz-box-shadow:0px 18px 40px #ccc;
-webkit-box-shadow:0px 14px 40px
#ccc;
box-shadow:0px 5px 30px #ccc;
}
#thumbnail{
width:160px;
height:160px;
background:#f6f6f6;
border:solid #cccccc 1px;
border:solid #cccccc 1px;
margin:5px;
padding:5px;
float:left;
text-align:center;
position: relative;
line-height: 156px;
-moz-box-shadow:4px 4px 4px
#ccc;n-webkit-box-shadow:4px 4px 4px #ccc; box-shadow: 4px 4px 4px #ccc; } img {
border:none;
-moz-box-shadow:0px 8px 10px #ccc;
-webkit-box-shadow:0px 8px 10px #ccc; box-shadow: 0px 8px 10px #ccc; }
a{
color:#0066FF; text-decoration:none;
} a:hover{
color:#0099FF; }
--></style><pre>
<div id="gallery_box" >
<div id="thumbnail">
<a href="" ></a>
</div>
</div>