I know there are tons of articles all over Google on doing something similar to this, but the problem is that they all vary on the implementation. What I'd basically like to do is have a single div of a fixed width be aligned to the center of my page, with bars on the side stylable to whatever I'd like. In Flex (MXML), I could easily make this happen with something like this:
<mx:HBox width="100%">
<mx:VBox id="sideBarLeft" width="100%"/>
<mx:Panel id="content" width="500"/>
<mx:VBox id="sideBarRight" width="100%"/>
</mx:HBox>
This would give me a design that looks like this:
[sideBarLeft][content][sideBarRight]
The sidebars would expand as the screen area grows, but the content would stay the same, 500px wide.
How would I achieve this in HTML with divs and CSS?
Also, is there a way to set the minimum width of the sidebars? Ie: a size that they couldn't shrink below? (for example: <mx:VBox id="sideBarLeft" width="100%" minWidth="150"/>)
And I apologize for the nature of how much of a novice I am at this stuff. I guess I've spent too much time building applications and too little time with HTML and CSS :)
Is there any particular reason you want to use div's over table cells in this case?
Regardless, I came up with a quick solution you might like:
<html><head>
<style type="text/css">
* { margin: 0; padding: 0; }
body { text-align: center; }
#content { width: 500px; height: 100%; margin: 0 auto;
text-align: left; background: #DDDDDD; overflow: auto; }
.column { width: 50%; position: absolute; top: 0; height: 100%; }
#leftcol { margin-right: 250px; background: #AAAAAA; height: 100%; }
#rightcol { margin-left: 249px; background: #AAAAAA; height: 100%; }
</style>
</head><body>
<div class="column" style="left:0;">
<div id="leftcol">This is the column on the left.</div>
</div>
<div id="content">Your content goes here.</div>
<div class="column" style="right:0;">
<div id="rightcol">This is the column on the right.</div>
</div>
</body></html>
I really minified it to fit nicely on here, but copy and paste that into a file and tell me what you think.
Just be forewarned: using tables is the preferred way to do this, and is perfectly acceptable. There is no problem mixing tables and divs, and styling/positioning tables with CSS. This solution is more of a "workaround", but one thing is for sure - it works.
Edit: #Breakthrough's answer seems like it does exactly what you want using just div's and CSS; I'll just leave my CSS-ified solution with Tables up as an alternative.
<html>
<head>
<style type="text/css">
#main { min-width: 800px; width: 100%; }
#content { width: 500px; background: red; }
.sidebar { background: blue; min-width: 150px; }
</style>
</head>
<body>
<table id="main">
<tr>
<td class="sidebar">Left</td>
<td id="content">Center</td>
<td class="sidebar">Right</td>
</tr>
</table>
</body>
</html>
Related
I'm trying to place an icon over a div but the overlaying div is pushing the rest of the contents down. I'm stuck although it should be pretty easy. Please have a look at this fiddle and let me know what I'm doing wrong (apart from using tables in the design!)
body{
background-color: #666;
}
.sizesbg {
background-color:#fff;
-webkit-border-radius: 10px;
border-radius: 10px;
width: 170px;
text-align: center;
}
.soldicon {
background: url("http://www.oroeora.gr/preowned/images/sold_curl_small.png") no-repeat scroll left top transparent;
height: 155px;
left: 0;
top: 0;
width: 170px;
z-index: 2;
}
<table>
<tr>
<td class="sizesbg">
<div style="width:150px; overflow:hidden; max-height:140px; max-width:150px; min-height:100px;">
<img src="http://www.carfolio.com/images/dbimages/zgas/manufacturers/id/843/bmw-logo.png" width="140" height="140">
</div>
</td>
<td class="sizesbg">
<div class="soldicon"></div>
<div style="width:150px; overflow:hidden; max-height:140px; max-width:150px; min-height:100px;">
<img src="http://mcurrent.name/atarihistory/warner_books_logo.gif" width="140" height="140">
</div>
</td>
<td class="sizesbg">
<div style="width:150px; overflow:hidden; max-height:140px; max-width:150px; min-height:100px;">
<img src="http://www.mindxstudio.com/images/mindxstudio-logo-icon.jpg" width="140" height="140">
</div>
</td>
</tr>
</table>
Thanks!
use position:absolute; on the divs, but of course the parent elements need to have position:relative; to stay in the right place
something like this:
http://jsfiddle.net/EESAc/5/
Edit:
This works well in Chrome ... but some other browsers had troubles (eg. Firefox), because for table elements position property is not defined, and you should use a block element instead ... so it works if you use another div around the images and set its position to relative. I added another quick fiddle for an idea:
http://jsfiddle.net/EESAc/9/
Give the class .soldicon a position: absolute; This way the element will be taken out of the document flow and won't affect the other elements.
Try to add the following to your .soldicon css:
position:absolute;
DEMO
Change your css to this:-
.soldicon {
background: url("http://www.oroeora.gr/preowned/images/sold_curl_small.png") no-repeat scroll left top transparent;
display: block;
height: 155px;
left: -7;
top: 0;
width: 170px;
z-index: 2;
position:absolute; // Change to absolute positioning
}
In my case (included popup element is bigger then including element) position: absolute;
didn't work exactly how I needed it (scrolling bar was added onto including element and the included popup wasn't displayed entirely). So the solution was:
position: fixed;
I've trying to do something that I'm sure is simple, but I can't do it.
All I want to do is have an image and then some text after that image, and be able to control accurately the amount of space between the image and the text.
Here's my code:
<div class="wrap"><div style="width:189px;""position:relative;float:left;top:5px;">
<img src="30000000_1.jpg" style="position:absolute" width="189">
</div>
In my style sheet, wrap has these attributes:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: white;
color: black;
padding: 10px;
margin: auto;
}
I want my text to look like this directly below the image:
Username
Age
Location
Currently, I just add loads of break tags to control where I have the text, but that's messy and there must be a better way.
Thanks in advance for any help.
<div class="wrap">
<div style="width:189px;position:relative;float:left;top:5px;">
<img src="30000000_1.jpg" style="position:absolute" width="189" />
</div>
<br clear="all" />
<div id="bottomText">
Username
<br /><br />
Age
<br /><br />
Location
</div>
</div>
CSS:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: white;
color: black;
padding: 10px;
margin: auto;
}
#bottomText{
margin-top: 10px;
}
Change margin-top: 10px to the desired distance.
Change bottomText to a class rather than an id, if you plan on having more than one.
(Note: I removed your "" from the second div because I'm not sure why that was there.
Check this solution jsfiddle. Personally I will not use inline style, because it becomes more messy. I have used <ul> for the text. This can give you better control over the position of the text.
Just use an Unordered List for the text since it is a list. ul are "block level elements" so they will self-clear. And definitely use an external stylesheet vs. inline styles. External is much cleaner and easier to work with and make changes to. Example: http://jsfiddle.net/codeview/Fk3EK/
HTML:
<div class="wrap">
<img src="30000000_1.jpg">
<ul>
<li>Username</li>
<li>Age</li>
<li>Location</li>
<ul>
</div>
CSS:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: yellow;
color: black;
padding: 10px;
margin: auto;
}
ul { list-style-type:none; }
li { padding:5px 0; }
I can't get it to work. Probably because you guys can't see the other code I have going on. But maybe I was approaching the problem in the wrong way.
Here's my code before I started fiddling with css positioning:
<br><br>
<div class="imgleft">
</div>
<br><br><br><br><br><br><br><br><br><br><br>
<span style="font-weight: bolder;font-size: 12px;"></br><br><br></br>
<font color="green"> User69 </font> <img src="online01.gif" alt="" border="0" style="float:center"><br>
Location:
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script language="JavaScript">document.write(geoip_region_name());</script></span>
</script></br>
<br><br>
The problem is, the images have a set width, but vary in height, so sometimes I'll use 8 break tags, other times 7, but the exact distance beneath each image (where the text goes) is different. And it looks bad.
There are 3 images on the page, so it goes image, text (well, there's an image as well, flashing gif) below image, then another image with text below it, and so on. From top to bottom on the left of the page.
Here are the relevant bits from my css:
.imgleft {
float: left;
width: 120px;
}
.imgleft img {
clear: both;
width: 175px;
padding-bottom: 0px;
}
I'm certain I'm making this way more complicated than it needs to be! Sorry.
I've put a link to my code in the comments to the first answer, if someone could take a look. Thanks.
I have a very basic Table structure to be placed in middle/center of the web page. I Have a code below, I know its incomplete to make this happen, as I am bad in structuring the HTML part, please help me
<div align="center" style="vertical-align:bottom">
<div align="center" style="vertical-align:bottom">
<table>
<tr><td colspan="2"></td></tr>
<tr><td>Name</td><td>J W BUSH</td></tr>
<tr><td>Proficiency</td><td>PHP</td></tr>
<tr><td>COmpany</td><td>BLAH BLAH</td></tr>
</table>
</div>
</div>
Also Please explain the concept behind the application of properties and CSS in achieving this time of structuring. so that I can use it in further learning....
I am completely newbie and dumb in HTML-CSS use... So I request you all the techies and Geeks to bear with my silly questions of HTML-CSS structuring.. Please dont leave the comments which demoralize me to go ahead with learning like "Is it a Homework..." or "GO TO TUTION CLASSES"etc...
The shortest and easiest answer is: you shouldn't vertically center things in webpages. HTML and CSS simply are not created with that in mind. They are text formatting languages, not user interface design languages.
That said, this is the best way I can think of. However, this will NOT WORK in Internet Explorer 7 and below!
<style>
html, body {
height: 100%;
}
#tableContainer-1 {
height: 100%;
width: 100%;
display: table;
}
#tableContainer-2 {
vertical-align: middle;
display: table-cell;
height: 100%;
}
#myTable {
margin: 0 auto;
}
</style>
<div id="tableContainer-1">
<div id="tableContainer-2">
<table id="myTable" border>
<tr><td>Name</td><td>J W BUSH</td></tr>
<tr><td>Proficiency</td><td>PHP</td></tr>
<tr><td>Company</td><td>BLAH BLAH</td></tr>
</table>
</div>
</div>
Try this :
<style type="text/css">
.myTableStyle
{
position:absolute;
top:50%;
left:50%;
/*Alternatively you could use: */
/*
position: fixed;
bottom: 50%;
right: 50%;
*/
}
</style>
I want to align my images similar to this page: http://nymanssnickeri.se/
My content div is 900px wide. As you can see, image #1 and #3 are located at the edge of the content div. On this page margin is only used on the image in the middle. If there wasnt more than 3 images, i could use first-child selector on the first image and the problem would be solved. But sometimes there will be multiple rows of images. Any ideas how to accomplish this in a good way? Thanks
You can give every image equal horizontal margins, and then on the first and last, add a class and have margin-left: 0 and margin-right:0, respectively. You'll have to play with the margin size / math a bit to get it right.
Example:
#container img { margin: 0 20px; }
#container img.first {margin-left: 0; }
#container img.last {margin-right: 0; }
20px is just a random number I chose. It depends on your image sizes, and how many you have.
Edit:
Math for the margins (check this, just made it up on the fly):
(total container width - total width of all images ) / (total number of images - 1) * 2
If you would like to have three images per row and not have to worry about setting pixel margins to achieve the effect you can do something like this...
Demo: http://jsfiddle.net/ENQTZ/1/
<div>
<span class="a"></span>
<span class="b"></span>
<span class="c"></span>
</div>
<div>
<span class="a"></span>
<span class="b"></span>
<span class="c"></span>
</div>
div {
text-align: center;
margin-bottom: 20px;
}
span {
display: block;
width: 32%;
height: 100px;
background-color: red;
}
.a {
float: left;
}
.b {
float: right;
}
.c {
margin-left: auto;
margin-right: auto;
position: relative;
left: 0px;
top: 0px;
}
If the layout is known ahead of time, including number of photos, etc. You could use a table:
<table width="900"><tr><td><img /></td><td><img /></td>
<td><img /></td></tr></table>
Or you could use a div, and concatenate these to create multiple rows:
<style
div#img-container { width: 900px; }
div#img-container img { display: block; }
img.lft { float: left; }
img.mid { margin: 0 auto; }
img.rgt { float: right; }
</style>
<div id="img-container">
<img class="lft"/>
<img class="mid"/>
<img class="rgt"/>
<br />
</div>
You might need to reset margins, paddings and borders to 0 on the images to use this method, otherwise the images will overflow slightly and not align correctly.
<center>
<div ID="Content" Style="Width:900px">
<center>
<table>
<tr>
<td>
Your image here
<td>
<td>
Your image here
<td>
</tr>
<tr>
<td>
Your image here
<td>
<td>
Your image here
<td>
</tr>
</table>
</center>
</Div>
</center>
Any of this useful to you? This is my template that I use. just add more td tags for more cells, and more tr tags for more rows of images.
Further, You can style your images to the exact size they need to be, but be careful that stretching / squashing might occur
<img ID="Image" src="Image/Cat.png" alt="Cat.png" style="Width:50px;Height:50px" />
I have 2 nested divs inside outer one, which has width:100%. Both nested divs should be in one line and first should get it size from it's contents:
<div id="#outer" style="width:100%; border:1px">
<div id="#inner1" style="border:1px; display:inline">
inner div 1. Some text...
</div>
<div id="#inner2" style="width:100%????; border:1px; display:inline">
inner div 2...
</div>
</div>
Question is how to make #inner2 div to get rest of the horizontal space if width of the #inner1 div is not specified and depends on what it is inside?
P.S. All styles are in separate classes in my case, here I putted CSS into style attributes just for simplification.
I want result to work in IE7+ and FF 3.6
In more details for me it looks like this:
<style type="text/css">
.captionText
{
float:left;
}
.captionLine
{
height: 1px;
background-color:black;
margin: 0px;
margin-left: 5px;
margin-top: 5px;
border: 0px;
padding: 0px;
padding-top: 1px;
}
</style>
<table style="width:300px;">
<caption width="100%">
<div class="captionText">Some text</div>
<div class="captionLine"> </div>
</caption>
<tr>
<td>something</td>
</tr>
</table>
Here is the image of what I want:
The mysterious overflow: hidden; is your friend here. It stops elements adjacent to floats from extending behind the float — I think that’s the layout you’re looking for.
Here’s some slightly edited HTML: I don’t think you can have # characters in your ids:
<div id="outer">
<div id="inner1">
inner div 1. Some text...
</div>
<div id="inner2">
inner div 2...
</div>
</div>
And here’s the CSS to achieve the layout you want.
(I put in additional CSS for IE 6 with HTML conditional comments. I just noticed you didn’t actually need it to work in IE 6 too, but if you fancy being nice to the IE 6 users out there...)
<style type="text/css">
#outer {
overflow: hidden;/* Makes #outer contain its floated children */
width: 100%;
/* Colours and borders for illustration purposes */
border: solid 3px #666;
background: #ddd;
}
#inner1 {
float: left;/* Make this div as wide as its contents */
/* Colours and borders for illustration purposes */
border: solid 3px #c00;
background: #fdd;
}
#inner2 {
overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */
/* Colours and borders for illustration purposes */
border: solid 3px #00c;
background: #ddf;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#inner2 {
zoom: 1;/* Make this div take up the rest of the horizontal space, and no more, in IE 6 */
}
#inner1 {
margin-right: -3px;/* Fix the 3-pixel gap that the previous rule introduces. (Shit like this is why web developers hate IE 6.) */
}
</style>
<![endif]-->
Tested and working in IE 6, 7, and 8; Firefox 3.5; and Chrome 4.
If you're reading this now you can probably use calc, so be thankful.
HTML
<div class="universe">
<div class="somewidth">
</div>
<div class="everythingelse">
</div>
</div>
CSS
.universe {
width: 100%;
height: 100%;
}
.somewidth {
width: 200px;
height: 100%;
}
.everythingelse {
width: 800px; /* fallback for emergencies */
width: calc(100% - 200px);
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
height: 100%;
}
See the working example on JSFiddle.
You would need to float the inner1 div to the left, like so:
<div id="#outer" ....>
<div id='#inner1" style="float:left; border: 1px solid #000;">
blabla
</div>
<div id="#inner2" style="... DON'T USE WIDTH AND DISPLAY HERE! ...">
gnihihi
</div>
</div>
This should do the trick. Check it out!
bye
You do not need to use div for nested element, just use SPAN like this
<div>
<span style="display:inline-block;width: auto;border: solid 1px black;">
hey you
</span>
<span style="display:inline-block;marging: 0px 2px;border: solid 1px black;">
always use proper tools.
</span>
</div>
Expanding on #Nasser Hajloo's answer, this works for me (even in IE6)
<div style="width: 400px; border: solid 1px red;">
<span style="float:left;width: auto;border: solid 1px black;">
hey you
</span>
<div style="display:inline-block;margin: 0px 2px;border: solid 1px black;">always use proper tools.</div>
</div>
Try it with the main div smaller than 400px to see how it adjusts. (It also works with divs rather than spans - the key is the width: auto in the first div/span.)
Try this: nest inner1 inside inner2, and remove the display:inline from inner2, like this:
<div id="#outer" style="width:100%; border:1px solid red">
<div id="#inner2" style="width:100%; border:1px solid black;">
<div id="#inner1" style="border:1px solid blue; display:inline">
inner div 1. Some text...
</div>
inner div 2...
</div>
</div>
You can see it working here: http://jsbin.com/adiwi
From your code it looks like you are trying to get a horizontal line to fill the empty space in your div. If I'm correct your looking to create a visual effect with markup. Correct me if I'm wrong.
(Would be nice to see an image of what you want)
Example:
Title ---------------------------
or
Title: Caption ------------------
This is not best practice. You should try to get this effect with CSS.
Try making your code more semantic first:
<div id="#outer" style="width:100%; border:1px">
<h3 style="border:1px; display:inline">
Caption
</h3>
</div>
To get the line:
create an image with the color you
want
make its height the same that you
want the line to be in px
position it with the background
property
.
#outer h3 {
display: inline;
background-color: #000;
color: #FFF;
}
#outer {
width: 100%; /* is the default of block element but just for celerity */
background: #000 url('image path') center left; /* position the image */
}
Your first problem is that you are prefixing your ids with a '#'. The # is only used in CSS to refer to the element with that id, e.g. the CSS rule #outer{width:100%} refers to your element:
<div id="outer"></div>
Also you don't need to use width's on div's (or any other block elements) that aren't floated, as they already automatically take up 100% of the available width.
If you want to the 2 DIVs to appear on the same line you have to float the first one to the left. The adjacent DIV will then appear on the side, again you don't need to sepecify widthd for the second element. Here is your complete example including a different coloured border for each div.
I've made the borders bigger so you can see clearer whats going on.
<html><body>
<style type="text/css">
#outer {
border: solid 5px #c00;
}
#inner1 {
border: solid 5px #0c0;
float: left;
width: 200px;
height: 300px;
}
#inner2 {
border: solid 5px #00c;
height: 300px;
margin-left: 210px; /* 200px left width + 2 x 5px borders */
}
</style>
<div id="outer">
<div id="inner1">
inner div 1. Some text...
</div>
<div id="inner2">
inner div 2...
</div>
</div>
</body></html>
Another solution is to run a javascript which resizes the captionLine class when document has loaded like this.
Took some time to get it working under IE8, have not tried IE7 but should work.
2 things to note.
IE does not support getElementsByClassName, therefor this function is rewritten.
IE handles margins differently when objects are resized and moved with style.marginLeft, somehow IE seems to keep the margin in the class declaration and adds this to the new style.margin.
<body onload="resizeCaptionLine()">
<style>
caption {
border: 1px solid blue;
padding: 0px;
}
.captionText {
border: 1px solid red;
float: left;
}
.captionLine {
background-color:black;
margin: 0px;
margin: 5px 0px 0px 5px;
border: 0px;
padding: 0px;
padding-top: 1px;
}
</style>
<table style="width:300px;">
<caption width="100%" name="caption1">
<div class="captionText">Some text</div>
<div class="captionLine"> </div>
</caption>
<tr>
<td>something</td>
</tr>
</table>
<table style="width:300px;">
<caption width="100%" name="caption2">
<div class="captionText">Some text</div>
<div class="captionLine"> </div>
</caption>
<tr>
<td>something</td>
</tr>
</table>
<script type="text/javascript">
function getElementsByClassName(node, class_name) {
elems = node.all || node.getElementsByTagName('*');
var arr = new Array();
for(j = 0; j < elems.length; j++)
{
if (elems[j].className == class_name)
arr[arr.length] = elems[j];
}
return arr;
}
function resizeCaptionLine()
{
var elems = getElementsByClassName(document, 'captionLine');
for(i = 0; i < elems.length ; i++)
{
var parent = elems[i].parentNode;
var sibling = getElementsByClassName(parent, 'captionText');
var width = parent.offsetWidth - sibling[0].offsetWidth;
if(elems[i].currentStyle)
{
var currentMargin = elems[i].currentStyle.marginLeft;
var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
elems[i].style.marginLeft = (sibling[0].offsetWidth) + "px";
}
else if (document.defaultView && document.defaultView.getComputedStyle)
{
var currentStyle = document.defaultView.getComputedStyle(elems[i], '');
var currentMargin = currentStyle.marginLeft;
var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
elems[i].style.marginLeft = (sibling[0].offsetWidth + margin) + "px";
}
else
{
var currentMargin = elems[i].style.marginLeft;
var margin = parseInt(currentMargin.substr(0,currentMargin.length-2));
elems[i].style.marginLeft = (sibling[0].offsetWidth) + "px";
}
elems[i].style.width = (width - margin)+"px";
}
}
</script>
</body>
Answer is really simple! If you have fixed div (menu) on the left side, then give fixed div float: left and your right flexible div margin-left that is bigger then width of first fixed div.