I am having difficulty getting 3 images of equal size to float properly. I have set the right and left margins on the center floated image to auto and it still doesn't work. All the panels in my layout are floated left which I revised from tutorials and works ok as they're butted up against each other, but trying to float images when there is more space than necessary, doesn't display as I want: with equal spacing between images Left & Center and Center & Right. My content panel is 534px wide with 10px padding taking up 554px plus a 1px border plus a 5px margin around the outside. The images are all 160px wide and I gave the FloatLeft class a 10px right margin, the FloatRight class a 10px left margin and the FloatCenter an auto margin for both left and right. Both FloatLeft and FloatRight are used on several pages, surrounded by text, which is fine.
Ok, update - I now realise float: center is not possible, DUH!, which is the problem - I'm just a few months into CSS etc.!
Are there any alternatives (other than a table). I could align them all left and make the margin: right attribute 27px (160px x 3 images + 27 + 27 = 534px) but then I'd need to create a new FloatLeft class specifically for these images. Any suggestions on the best method of aligning the images would be much appreciated.
Gary.
The relevant HTML & CSS:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Solar Power Today</title>
<link rel="stylesheet" type="text/css" href="solarpower.css">
</head>
<body>
<div id="wrapper">
...........
<!-- header panel, then horizontal navigation panel then left panel then ... -->
..........
<div id="content">
<!-- main content -->
<h1 id="contentheader">Introduction to Solar Power</h1>
<p>
<img class="FloatLeft" src="images/sunonsolarpanelroof160px.jpg" alt="Sun shining
on roof solar panels" width="160" height="160">
<img class="FloatCenter" src="images/smallwindturbine160px.jpg" alt="Small wind
turbine spinning" width="160" height="160">
<img class="FloatRight" src="images/waveturbine160px.jpg" alt="Wave turbines in
motion" width="160" height="160">
</p>
CSS:
* {padding:0; margin:0; border:0;}
.FloatLeft {
float: left;
margin: 0 10px 10px 0;
}
.FloatRight {
float: right;
margin: 0 0 10px 10px;
}
.FloatCenter {
float: center;
margin: 0 auto 10px auto;
}
#content {
width: 534px;
min-height: 400px;
margin: 0px 5px 5px 0px;
padding: 10px;
float: left;
border: 1px solid black;
display: inline;
}
I recently tackled the issue of equally spacing and arbitrary number of elements across an unknown width using text-align: justify;. The full discussion can be found at “text-align: justify;” inline-block elements properly?, with good discussion on the pros/cons and alternate solutions.
Here's a fiddle showing how to arrange three images using the technique discussed. It should work in all major browsers, although feel free to kick the tires and get back to me with issues.
You are using float:center; in .FloatCenter class, that is invalid, there is no center value for float, put float:none; and chnage your margin length;
.FloatCenter {
float: none;
margin: 0 auto 10px 15px;
}
I am trying, as far as possible to keep things simple. I would prefer to know how the code I'm applying works rather than using a solution without fully understanding it. I wasn't aware that text-align could help to align images so I had a play around with that. Until I fully understand the above text-align: justify solution which has lost me a bit, I have put the each of the 3 images in a new div container class .ImageBox:
.ImageBox {
width: 178px;
margin-bottom: 10px;
float: left;
}
I then put each image inside a element and used an inline style on the element to align the image position:
<div class="ImageBox">
<p style="text-align: left"><img src="images/sunonsolarpanelroof160px.jpg" alt="Sun
shining on roof solar panels" width="160" height="160"></p>
</div>
<div class="ImageBox">
<p style="text-align: center"><img src="images/smallwindturbine160px.jpg" alt="Small
wind turbine spinning" width="160" height="160"></p>
</div>
<div class="ImageBox">
<p style="text-align: right"><img src="images/waveturbine160px.jpg" alt="Wave turbines
in motion" width="160" height="160"></p>
</div>
I know inline styles are frowned upon but it uses less code than creating a separate div container for each image and setting the text-align property in each div container to either left, center or right in the stylesheet. I've also just realised that simply specifying width and or height properties and even a border (for testing purposes) will not show a div container in the browser. The div container class appears to need either a float or clear property for the box to come to life. I need to learn more css.
Here's one way you can achieve what you're looking for:
http://jsfiddle.net/CsjYN/1/
THE HTML:
<div id="content">
<h1 id="contentheader">Introduction to Solar Power</h1>
<div class="images">
<img class="img-left" src="images/sunonsolarpanelroof160px.jpg" alt="Sun shining on roof solar panels" />
<img class="img-center" src="images/smallwindturbine160px.jpg" alt="Small wind turbine spinning" />
<img class="img-right" src="images/waveturbine160px.jpg" alt="Wave turbines in motion" />
</div>
</div>
THE CSS:
#content {
width: 534px; /* full width 556px */
padding: 10px;
border: 1px solid #000;
}
#content h1 {
margin-bottom:20px;
}
#content .images {
overflow:auto;
}
#content .images img {
width:160px;
height:60px;
float:left;
}
#content .images img.img-left,
#content .images img.img-center {
margin-right:27px;
}
Related
I was under the impression that when using % or auto for margins on a div contained within another div the position would be calculated in respect to the parent div.
So if I have a div with height: 50%, margin-top: 25% and margin-bottom: 25% the box should centre vertically within the parent div.
When I do this though the div centres on the page not the parent div.
The CSS
div#header {
width: 100%;
height: 100px;
margin: 0px;
position: fixed;
}
div#leftnavigation {
height: 50%;
margin-top: 25%;
margin-bottom: 25%;
float: left;
}
And the HTML
<!--Title and navigation bar-->
<div id='header'>
<!--Left navigation container-->
<div id='leftnavigation'>
<p>efwfwgwegwegweg</p>
</div>
</div>
In my case there are other divs floated to the right of the one detailed above, but any one of them behaves the same way. I'm assuming I'm doing something daft but I've been over all the other questions I could find along these lines and still can't figure it out.
EDIT
Here's the JSFiddle as requested http://jsfiddle.net/ChtVv/
UPDATE
I've tried removing the margin constraints and setting the leftnavigation div to height: 100%, this works so the issue is with the margin attribute?
The reason it didn't work is that percentage-margins are percentages of the parent's width, not its height. You can tell this by using margin-top: 25px; margin-bottom: 25px;, and also by increasing the width of the right-panel in jsFiddle.
In all cases % (percentage) is a valid value, but needs to be used
with care; such values are calculated as a proportion of the parent
element’s width, and careless provision of values might have
unintended consequences.
W3 reference
CSS is tricky!! :D
This is a borrowed technique to centre vertically and horizontally, but it would involve changing your HTML and CSS. I am not sure how flexible you are with your code:
CSS:
#outer {width: 100%; border: 3px solid red;}
#middle {width: 100%; text-align: center;border: 3px solid green;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align: left;border: 3px solid blue;}
/* Courtesy: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
HTML
<!--Title and navigation bar-->
<div id='outer'>
<!--Left navigation container-->
<div id='middle'>
<p id="inner">efwfwgwegwegweg</p>
</div>
</div>
You can build upon this to achieve whatever you are after!
fiddle: http://jsfiddle.net/pratik136/ChtVv/2/
Ok, so there are a lot of reasons why this would not work.
The main reason would be that your container has position:fixed;
When adding position:fixed; to a element, it no longer reserved it's space in the DOM and won't contain it's children.
I have made a example of the best way (in my Opinion) to center your child both Vertically & Horizontally
Here is a demo.
Demo
And here is the code.
<div id="container">
<div id="child"></div>
</div>
#container{
width:100%;
height:500px;
background:#CCC;
margin:0;
}
#child{
width:50%;
height:50%;
background:#EEE;
position:relative;
top:25%;
left:25%;
}
I'm trying to get some nested div tags to auto grow in height depending on the content inside them. A sample code is given here. The middle for example has some more content, but the height doesn't seem to grow. What is the trick to make it auto grow? I took out all the floating elements from inside the parents thinking it might be the CSS clear rule. But that didn't help either. Appreciate any help.
<div id="editmain">
<div class="ticker">
some content here
</div>
<div class="ticker">
some longer content content here
</div>
<div class="ticker">
some content here
</div>
</div>
#editmain
{
position:relative;
min-height:480px;
background-color:#84d;
overflow:hidden;
padding: 20px 0px 30px 0px;
}
.ticker
{
position:relative;
border-bottom: solid 2px #ddd;
margin:10px;
background-color:white;
overflow:hidden;
height:auto;
min-height:100px;
}
In the absolute positioning model, a box is removed from the normal
flow entirely (it has no impact on later siblings) and assigned a
position with respect to a containing block.
w3.org
Remove the absolute positioning and find another way to format your labels and inputs using width and margin. Fiddle
.tickertxtlabel
{
display:inline-block;
margin: 10px 10px 10px 10px;
width:90px;
}
I have two questions, hope its not a problem putting them in one post.
Question1
I have a border I want to stretch across the full screen but cant get it to work. I have tried width: 150%, which is okay for the right side, but leaves the left as before. I then added margin:- 100% but that naturally caused issues with items with the div. My code is below. Also im guessing the code I tried would be considered a hack? I am trying not to get into that habit.
#border{
border-top: thick double #000;
border-bottom: thick double #000;
padding: 1% 0 1% 0;
margin-top: 3%;
margin-bottom: 3%;
}
#wrapper{
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
#content{
margin-top: -3%;
}
<div id="wrapper">
<div id="content">
<div id="border">
<!--some small images-->
</div>
</div>
</div>
Question2 I am trying to add a jagged edge with a shadow to the top of a div, I have created the image of the jagged edge and tried using the css3 shadow effect but with no success can someone please advise?
Your #border is inside your #wrapper with max-width:1200px so it's normal it will stop at the 1200-mark. Change the HTML to
<div id="border">
<div id="wrapper">
<div id="content">
<!--some small images-->
</div>
</div>
</div>
and work from there.
Search Google for CSS3 box-shadow for your second problem, lots of examples there!
I want this design:
DIV1: auto-size DIV2: 160px
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
How do I solve this problem? I've tried stuff like floating left & right, but I just can't get them on the same line.
I want the div 2 to always be there, and the div1 to have a max-width of 40em, but resize to allow the div 2 to show at all times if its necessary.
My code:
<style="text/css">
#mainbulk {
padding: 1.5em 2% 1.5em .5em;
}
#ads {
width: 7.5em;
float: left;
display: table-cell;
padding: 0 0 0 2em;
}
#textcontent {
width: 70%;
float: left;
display: table-cell;
}
</style>
and
<div id="mainbulk">
<div id="textcontent">
<p>This is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that this site can't do, then nothing can do it, but I'd suggest to try all of this site's features before complaining.</p>
</div>
<div id="ads" align="right">
ads would, hypothetically, be placed here if this were actually an actual website.
</div>
</div>
I'm encountering this problem:
http://www.screencast-o-matic.com/watch/c6lrXsXyQ
Try the following. ids are used for unique content and should be used once only per page.
Also tables are still worth considering in some circumstances. Using borders on your divs while you are working on the layout will also help (red and green borders below).
<html>
<head>
<style type="text/css">
.textcontent {
float: left;
border: 1px solid red;
width: 700px;
margin-bottom: 4px;
}
.ads {
float: left;
width: 120px;
border: 1px solid green;
}
.textcontent:before {
clear: left;
}
</style>
</head>
<body>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
</body>
</html>
Not really sure what you're after, but you can try what I've done here. You should only use an id on a unique element in a document, so if you want more than one, re-assign them as classes. display: table-cell; is not needed here.
HTML:
<div class="mainbulk">
<div class="ads">
ads would, hypothetically, be placed here if this were actually an actual website.
</div>
<div class="textcontent">
<p>This is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that this site can't do, then nothing can do it, but I'd suggest to try all of this site's features before complaining.</p>
</div>
</div>
CSS:
.mainbulk {
padding: 1.5em 2% 1.5em .5em;
border: 1px solid #000;
}
.ads {
width: 7.5em;
float:right;
text-align: right;
border: 1px dotted #f00;
}
.textcontent {
max-width: 40em;
float: right;
border: 1px dotted #00f;
}
I believe I can help!
What you have to do is very simple.. Let's say you want div1 and div2 to take up 100% of the screen. Just make a div with the id container. Set the padding to: 0 160px 0 0, And also set box-sizing and -webkit-box-sizing to: border-box.. All this does is Pushing the content away from the right side of the screen. The border-box setting will keep the width 100% instead of the default 100% + 160px.
Now you can place div1 in the container.. If everything is done correct you see a white space of 160px on the right side.
What you will do next.. You have to put div2 before div1 in your HTML.. After that set some css properties.. Div2 should float to the right and have the following margin: 0 -160px 0 0.
The divs are on the right places cause div1 isn't bothered by div2 because it's in an area which is forbidden for div 1 thanks to the padding of the container. Div2 however is not restricted to this area because of the negative margin.
There's one last thing you wan to do.. Lets say the containerDiv has nice borders and a simple backgroundcolor. When the div1 is longer han div2 thr container will not stretch for div2 because it is floated.. Thats why you shoukd put this in the very end of div1: .
This line creates a singe new line on the webpage at the point where there's no floating element beside it. In other words, it will save you!
I have a small problem with overlapping columns. Basically I have 3 columns and the content in the middle column is overlap by the right column. I'm a css amatuer so I haven't been able to make the right column expand when the content in the middle column is bigger than usual. If I try to make the middle column wider then the right columns drops down and everything goes out of alignment.
This is the css code:
#content {
width:960px;
margin:0 auto 20px;
overflow:visible
}
.c_middle {
width:960px;
background: transparent url(../images/content_middle.gif) repeat-y top center;
}
.c_left { background: transparent url(../images/content_left.gif) repeat-y top center;}
.c_right {background: transparent url(../images/content_right.gif) repeat-y top center;}
.c_full {background: none;}
#leftcolumn, #rightcolumn {
float: left;
width: 210px;
margin: 0 10px 0 0;
}
#rightcolumn {
margin: 0 0 0 10px;
}
div#maincolumn {
float: left;
width: 500px;
padding:0 10px;
}
div#maincolumn_full {
float: left;
width: 960px;
padding:0 0 10px;
}
div#maincolumn_left {
float: left;
width: 720px;
padding:0 10px 10px;
}
div#maincolumn_right {
float: left;
width: 720px;
padding:0 10px 10px;
}
Thanks in advance.
It appears you're building a 960px project - why not use the 960 Grid System instead of reinventing the wheel? It would be a quick and painless way of eliminating any issues you're presently having with these columns.
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
<div class="container_12">
<div class="grid_3 alpha">
<p>Left Column</p>
</div>
<div class="grid_6">
<p>Center Column</p>
</div>
<div class="grid_3 omega">
<p>Right Column</p>
</div>
<div class="clear"></div>
</div>
Sort of hard to tell without your markup, but it seems that in some cases your width + margin + padding would exceed 960px horizontally. But again, without knowing how you have your markup nested, it's hard to tell.
And I agree with Jonathan Sampson -- no sense in reinventing the 960 grid system. If you get this to work, you'll inevitably still run into weird issues in some browsers if that's a concern to you. Why not just leverage other peoples' efforts who've already worked through all that.