First time poster here and a total noob at css and programming. Please find the photo attached.
Basically I want to have three separate divs inside a container. I can get the left and middle one corrent but the right one does not seems to work. Any suggestions would be greatly appreciated.
Thank you!
P.S here is the code. I wanted to try it out first hence the inline css style.
<body>
<div id=“wrapper”>
<div id=“header”>Content for id “header” Goes Here</div>
<div id=“slider”>Content for id “slider” Goes Here </div>
<div id=“video”>
<div id=“leftvid”>Content for id “leftvid” Goes Here </div>
<div id=“midvid”>Content for id “midvid” Goes Here</div>
<div id=“rightvid”>Content for id “rightvid” Goes Here</div>
</div>
<div id=“footer”>Content for id “footer” Goes Here</div>
</div>
There are lots of options here, such as simply floating all three boxes. But if you want to keep the middle one unfloated like it currently is, you have to swap the order of the second and third in the HTML, like so:
<div id="leftvid">Content for id "leftvid" Goes Here </div>
<div id="rightvid">Content for id "rightvid" Goes Here</div>
<div id="midvid">Content for id "midvid" Goes Here</div>
A floated element coming after a full-width non-floated object will sit below it.
Floated elements must be BEFORE unfloated content in the source code, as a floated element cannot be displayed higher than the bottom edge of an element that precedes it in the source code.
SEO and semantics some times will not allow us to switch elements around so liberally.
So really what is happening here is you are placing one div at the center of the container and another at each edge. The latter part of this is easy with float:left|right; and the first part is a centering a float trick, accomplished with position relative and a negative margin.
Please ignore my ignorance as I am a noob as you can see, but what would be the ideal way for having ids in this situation? Can I target a div without id or class?
It is a better practice to use classes than ids. IDs should be reserved for items that need to be uniquely identified, such as for on-page links (fragment identifiers) or for JavaScript targets. You can change the hash marks on your css to dots and the word “id” on the HTML page to “class” and everything should continue to work just as it does now.
I notice that you are using fixed heights on the lower columns in your demo. Is that the way your page is designed, or do you expect the columns to extend to be the same height, or should they extend independently of one another? I’m guessing that the fixed height is likely to be a problem. What is your game plan?
Regarding the fixed heights - the content of the lower boxes would not change so I though to give them a fixed height. I am not sure if it is the right way as this is my first ever attempt to convert psd to css/html.
here is a preview of the psd( not real website, just a dummy sample)
I would appreciate any feedback on the css fixed heights.
The only time it’s relatively safe to use a fixed height is on an image. If there’s text involved, you don’t know how your end users have their machines configured. For example, if they have their system fonts set to display larger than usual, the text will be much bigger, and will spill out of the fixed height container and looks like a dreadful mess.
If you want to ensure that the boxes stay the same height, there are ways to do that, such as setting the boxes to display: table-cell and setting their container to display: table.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?971901-CSS-How-to-make-3-divs-inside-a-div-and-center-them-with-equal-margins
Thread: CSS: How to make 3 divs inside a div and center them with equal margins
2013.02.08 07:11
WanaBWebdesigner
Widths of column divs are fluid.
All columns in one row are the same height.
Note: border-spacing applies space at edges of table, too.
colors are applied for "looks" in this demo.
IE8+
-->
<head>
<title>3 columns</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<style type="text/css">
.video {
display:table;
table-layout:fixed;
min-width:900px; /* some minimum width is a good idea. */
border-spacing:20px 0; /* note that spacing is also applied to right and left ends */
background-color:#666;
margin:0 auto;
}
.video div {
display:table-cell;
width:33%;
vertical-align:middle;
border:1px solid #bbb;
background-color:#eee;
padding:30px;
}
</style>
</head>
<body>
<div class="video">
<div>Content for "leftdiv" Goes Here. </div>
<div>Content for "middiv" Goes Here. Content for "middiv" Goes Here. Content for "middiv" Goes Here. Content for "middiv" Goes Here.</div>
<div>Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. Content for "rightdiv" Goes Here. </div>
</div>
</body>
</html>
The IDs should be limited to unique elements. Even then they are kinda heavy and you might find yourself painted into a corner when trying to target a rule. To learn more google: CSS specifity).
Also, code should be stream lined. When targeting rules, Look for PATTERNS in your mark up. You can reuse code that way. For example. Since you wanted a container with 3 divs, rather than repeat myself targeting each rule for each ID. I targeted the container’s child DIVs instead. Thus I targeted all the divs at once for the applicable rules, rather than one at a time. I hope that makes sense to you.
display:table;
tempting , but it has a few drawbacks, not the least important of which is IE doesn’t like it.
Art Direction:
you should try to anticipate how you will code something BEFORE you draw it out on Photoshop. Dont worry t will come with experience ( and paying close attention as you create your layouts). There are some thing CSS/HTML cant do, besides Just because you CAN do something doesnt mean you should.
You will see that each step , in each project is very different and solutions must be developed uniquely for each. It’s more about learning a thinking style for overall problem solving than commands and properties.
At first I thought you wanted to have fixed width areas for your videos ( ok that kinda makes sense as the video will be specific width anyway… that just the way videos are) and compensate by having fluid space ( gutter) between the videos. To be honest that gets quite ugly quickly. I am seeing you are going towards a fixed gutter solution. That too has a it’s draw backs ( the fixed dimensions of video , for one) but it’s an improvement.
The good stuff. Something for you to reverse engineer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#video div {
min-height: 350px;
width: 33.33333%;
float:left;
}
#video div a{
display:block;
height:100px;
color:#fff;
background: #333;
position: relative;
overflow: hidden;
text-align: center
}
#video div a:after{content:""; position: absolute; border: 5px solid transparent; border-bottom:15px solid silver; bottom: 0; left:15px}
#leftvid a:before{content:url(videhed.gif); display:block; }
#midvid a:before{content:url(videhed.gif); display:block; }
#rightvid a:before{content:url(videhed.gif); display:block; }
#video div p{ padding:15px; font:normal 80%/1.3 sans-serif; }
#leftvid {
margin-left: -50px;}
#midvid {margin-left: 25px;}
#rightvid {margin-left: 25px;}
#video{ display:inline-block; vertical-align: top; width:100%; }
.center{position: relative; margin:0 15%; overflow: hidden; padding-left: 50px;background: silver; min-width:618px}
.center:before, .center:after{ background: #000; content:""; position: absolute; top:0; bottom:0; width: 25px; }
.center:before{ background: #000; content:""; position: absolute; left:33.333333%; top:0; bottom:0; width: 26px; margin-left: -17px;}
.center:after{ background: #000; content:""; position: absolute; left:66.66667%; top:0; bottom:0; width: 26px; margin-left: -10px;}
</style>
</head>
<body>
<div class="center">
<div id="video">
<div id="leftvid">
<a href="#">Headline. this content will be replaced/ covered with a fixed height image anyway</a>
<p>Click here to view Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit ...</p>
</div>
<div id="midvid">
<a href="#">Headline. this content will be replaced/ covered with a fixed height image anyway</a>
<p>Click here to view stuff. sample of a different length of text all columns should still APPEAR equal ...</p>
</div>
<div id="rightvid">
<a href="#">Headline. this content will be replaced/ covered with a fixed height image anyway</a>
<p>Click here to view Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ...</p>
</div>
</div>
</div>
</body>
</html>
Fixed height, graphical header/links on top, fluid (height/width) “equal height” columns, faux gutters ( this technique will only work for solid colors/ regular patterns). required only one addition wrapper element, which may be present and available in your overall markup anyway.
Gees, never thought I would get such a great response and so much to learn in a day!
Much appreciated.
As a print designer I needed some quick results to keep me motivated :), I watched a lot of training videos but was getting rather bored. So I thought to quickly mock something in photoshop and have a crack at css.
I am going to play around with what you provided and hopefully put it to good use.
