Trying to get everything inside a container div to be responsive - html
I created a div with a container class and inside it I have all the content. I then used media queries and set a width of 100% to the container that has everything inside it. For some reason only one section is responsive however.
HTML:
<head>
<title>UI/UX Design Portfolio | Rafael Caba</title>
<link rel="shortcut icon" href="favicon.jpg">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="UI UX design, Visual Design, Web Design, HTML, CSS">
<meta name="description" content="UI UX Design Portfolio">
</head>
<div class="project4-container">
<section class="sketch">
<p class="sketch-text">Sketch<p>
<div>
<img src="http://i.imgur.com/TPtZjzl.jpg">
<img src="http://i.imgur.com/vl3WGnr.jpg">
</div>
</section>
<section class="userflows">
<p class="sketch-text">User Flows<p>
<div>
<img src="http://i.imgur.com/t6CS7cg.jpg">
<div style="margin-top:50px;"></div>
<img src="http://i.imgur.com/VW9ii4V.jpg">
</div>
</section>
<section class="wireframes">
<p class="wire-text">Wireframes</p>
<div>
<img src="http://i.imgur.com/2jRqo5V.jpg">
<img src="http://i.imgur.com/CnIv0Wq.jpg" class="project-margin">
<img src="http://i.imgur.com/JFi18km.jpg" class="project-margin">
<img src="http://i.imgur.com/L3SbBeg.jpg" class="project-margin">
<img src="http://i.imgur.com/WNxNxwn.jpg" class="project-margin">
<img src="http://i.imgur.com/pCfk4OZ.jpg" class="project-margin">
<img src="http://i.imgur.com/qmsAb5t.jpg" class="project-margin">
<img src="http://i.imgur.com/wdL5nhH.jpg" class="project-margin">
<img src="http://i.imgur.com/emCHs7V.jpg" class="project-margin">
<img src="http://i.imgur.com/SNCVpUf.jpg" class="project-margin">
<div class="space"></div>
</div>
</section>
<section class="project4">
<p class="mock-text">Mockups</p>
<div>
<img src="http://i.imgur.com/V4a8F0w.jpg">
<img src="http://i.imgur.com/u6xRuKS.jpg" class="project-margin">
<img src="http://i.imgur.com/wpNgzza.jpg" class="project-margin">
<img src="http://i.imgur.com/N3u07hA.jpg" class="project-margin">
<img src="http://i.imgur.com/l5vVy09.jpg" class="project-margin">
Back to top of page
<div class="space"></div>
</div>
</section>
</div>
CSS:
#media screen and (max-width:640px){
div.headertitle{
width:100%;
}
nav ul{
width:99%;
}
nav ul li{
padding-right:0;
margin-left:5.5%;
}
.projects{
width:100%;
}
section.sketch{
width:100%;
}
section.sketch img{
width:100%;
margin:0;
}
section.sketch p{
margin-left:0;
}
section.sketch-mobile{
width:100%;
}
section.sketch-mobile img{
width:100%;
margin:0;
}
section.sketch-mobile p{
margin-left:23px;
}
.about-section{
width:90%;
}
.about-section p{
width:100%;
margin-top:10%;
}
.about-section img{
width:90%;
margin:0 auto;
margin-top:15%;
}
.project4-container{
width:100%;
background-color:red;
}
}
jsfiddle - https://jsfiddle.net/qdhcnpq0/
The problem are the images.
You can try to use max-width
CSS:
img {
max-width: 100%;
}
DEMO
Related
inline center three image
In my header I have three logos. I need to center those logoes, where there is a margin between them on around 100 - 140px. I did not know how to do that, so I solved it with putting a margin on 150px, with the result that the logos are not placed on mobile devices.
On the mobile they should be vertical instead of horizontal.
I actually thought I could do it like this:
display: inline;
margin: 0 auto;
But that is not doing abything at all. Does anybody knows how I can solve this, so they also fit on mobile devices?
<div class="fullscreen landing parallax">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-12 logo">
<!-- /.logo -->
<img src="/img/seminar/company_1-logo-white-small.png" alt="company_1" class="logo">
<img src="/img/seminar/company_2-white.png" alt="company_2">
<img src="/img/seminar/company_3-white.png" alt="company_3">
</div>
</div>
</div>
</div>
</div>
CSS
.logo {
margin: 20px 0 15px 0;
}
.logo img{
margin-left: 160px;
width: 163px;
}
Try to separate the row into 3 columns and place the images inside the column with bootstrap's text-center class. Bootstrap will align images vertically on mobile UI.
On iPad horizotal
On iPad vertical
On desktop browser
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<style type="text/css">
.logo {
margin: 20px 0 15px 0;
}
.logo img {
margin-left: 160px;
width: 163px;
}
</style>
</head>
<body>
<div class="fullscreen landing parallax">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add this:
.logo {
display:flex;
justify-content:center;
align-items:center;
}
You'll probably need to set a width on the .logo element and maybe `margin:0 auto;' too depending on its width.
For more info on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Live example:
.logo {
display:flex;
justify-content:center;
align-items:center;
}
.logo img {
margin-left:10px;
margin-right:10px;
}
<div class="logo">
<img src="http://placekitten.com/200/100" alt="">
<img src="http://placekitten.com/200/100" alt="">
<img src="http://placekitten.com/200/100" alt="">
</div>
How do I prevent my H1 tag from moving out of sight (dissapearing)?
I haven't done much html and css lately and I can't figure out why my H1 disappears out of sight when I re-size the browser...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript src="Jquery1_10_2.js"> </script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" media="screen" />
<link rel="stylesheet" type="text/css" href="LogIn_Page.css" media="screen" />
<!-- <script type="text/javascript src="LogIn_Page.js"> </script> -->
</head>
<body>
<div style="margin-top: 15px;text-align: center;" class="navbar navbar-inverse navbar-fixed-top container">
<img src="Logo.png" alt="somesite" style="width:225px; height:100px; text-align:center; margin-right:5px">
<img src="somesite_logo.png" alt="somesite" style="width:225px; height:100px; text-align:center;margin-right:5px; margin-left:5px;">
<img src="somesite.png" alt="somesite" style="width:225px; height:100px; text-align:center; margin-left:5px;">
</div>
<div class="container body-content" style="margin-top: 125px;">
<div class="row">
<div class="col-md-12">
<H1 style="margin-bottom: 50px;">Welcome to the Crops web application</H1>
<P>Please login:</P>
<button onclick="window.location.href="/auth"" >Login link</button>
</div>
</div>
</div>
<div id="footer">
<footer>
<script>window.onload = function() {
var d = new Date();
var n = d.getFullYear();
document.getElementById("date").innerHTML = "© " + n + " My company";}</script>
<p id="date"></p>
</footer>
</div>
</body>
</html>
The three images stack on top of each other like they are supposed to, but its just the H1 tag that dispersal totally. I haven't even used any custom css, except for the default bootstrap package.
Could someone point me out to the right solution?
I tried putting inside the H1 tag the following styles: position, float, height, width, min-height, min-width, but none of those seem to work out for me it just keeps disappearing when I size down the browser to the max. Its there when the browser is full screen of course....
You can add position: relative to your navbar.
.navbar.navbar-inverse {
position: relative;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div style="margin-top: 15px;text-align: center;" class="navbar navbar-inverse navbar-fixed-top container">
<a href="http://somesite.com/" title="Web Site">
<img src="Logo.png" alt="somesite" style="width:225px; height:100px; text-align:center; margin-right:5px">
</a>
<a href="http://www.somesite2.org/" title="Web Site">
<img src="somesite_logo.png" alt="somesite" style="width:225px; height:100px; text-align:center;margin-right:5px; margin-left:5px;">
</a>
<a href="http://somesite3.com/" title="somesite Web Site">
<img src="somesite.png" alt="somesite" style="width:225px; height:100px; text-align:center; margin-left:5px;">
</a>
</div>
<div class="container body-content">
<div class="row">
<div class="col-md-12">
<h1 style="margin-bottom: 50px;">Welcome to the Crops web application</h1>
<p>Please login:</p>
<button onclick="window.location.href="/auth"">Login link</button>
</div>
</div>
</div>
It's not disappearing, it just goes off the screen cause of it's huge size.
Try using #media (max-width: _px) in CSS to change the position and text size of theh1` accordingly:
#media (max-width:300px){
h1{
text-size: _px/em/%;
<more styles here>
}
}
So when the screen is less than 300px, it'll style the h1 to whatever you put in there.
It's not disappearing, it's just covered by the navbar. You need to add more margin for when the navbar elements stack up and expand the navbar. For example
<div class="container body-content" style="margin-top: 300px;">
will make it appear. However you need to actually put it in a media query. With your fixed image widths those queries to add to the styles section would be
#media (max-width: 732px) {
.body-content {
margin-top: 225px !important;
}
}
#media (max-width: 499px) {
.body-content {
margin-top: 325px !important;
}
}
cannot make my data in small centerd gray boxes
This is the beginning of my html: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"></link> <script type="script" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <body> <h1>Delta Fresh Samples:</h1> <p>save date: 08:23:11 31-May-02015</p> <div class="jumbotron" id="distance_small"> <h3>distance small</h3>0_1 <br> <a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"> <img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)" height="100" width="200"> </a> <br><span> </span>editor:<span><a title="0_0" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969444,22950508,22946295,63734947,63734946,22945044,76103782,61849159,22943314,22945842,22949040,76952893,22958740,22955108,22963930,22963937,61487751,78453835,78453836,78190323,78190322,22966401,22963938,22955881,22952772,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704023,22959771,78100291,78100305,78100306,75676668,22959690,22947454,22940596,22961456,22958490,22948978,22961457,22963582,65496487,22946251,22964699,74195770,75079286,22964701,22965880,62248964,78100492,78100491,22962630,22951570,22948096,22954294,66161229,66147839,22960015,22949762,22945545,22946824,22951606,22951605,22948122,22946840,22960419,22965961,22960420,22962680,22962685,22962684,22962683,22947641,22961812,22964726,22965877,22965967,22965964,22951601,22946847,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 0</a></span><span><a title="0_1" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969776,83970667,83970668,83970679,83970678,83969787,83969884,83969791,83969889,83969965,62003149,22966553,22966554,22946589,22954701,22948771,22960706,22952457,22952456,69823920,67646833,22956976,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704067,61704043,22957408,61704040,72391451,72391452,61724192,61975137,61975144,57602828,61541078,22965716,22949679,22964912,22943804,22965887,22943805,81603700,81603658,22960396,22960397,22965904,22959154,22965764,22964822,22946555,22954865,22962698,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 1</a></span><span><a title="0_2" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,22551059,22540619,22540617,22521289,22531355,22531357,22523497,77460394,77460392,61690687,67007203,67007202,22959509,22952362,22947304,22946552,73617242,77749675,73617397,22961888,22941066,62110860,83482398,83482876,83482875,22946605,74542235,83482565,83482564,61713972,74882174,74882173,69051742,61975892,65179805,65179806,61713939,77541139,77541140,61975883,22952799,61539504,57601394,22959961,22947692,22959735,22958946,22958947,22958607,22951490,22961077,22964301,22954627,22946241,22963491,76369581,22950499,22966864,22965699,22949657,22962492,22962497,22962496,22946416,22948460,22951483,22948007,22946064,22951140,61459698,22957970,22965738,22954249,22954934,22960321,78858435,22958543,69824727,69824726,22945987,22945859,67102730,77869444,77869443,22966245">alt 2</a></span> <br> </div> <div class="jumbotron" id="distance_large"> <h3>distance large</h3>0_0 <br> <a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"> <img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)" height="100" width="200"> </a> <br><span> </span>editor:<span><a title="0_0" href="https:/www.waze.com/editor/? and this is the result: I wanted to created boxes in the center of the page. I saw twitter bootstrap example (this example) but I cannot make class "jumbotron" center my data in medium size gray boxes. what am i missing? In Addition, if i would want to style this without twitter bootstrap how would you advise me to do this?
you can achieve that with some styling
like this:
html
<h1>Delta Fresh Samples:</h1>
<p>save date: 08:23:11 31-May-02015</p>
<div class="jumbotron" id="distance_small">
<h3>distance small</h3>0_1
<br>
<a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)">
<img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"
height="100" width="200">
</a>
<br><span>editor:</span><span><a title="0_0" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969444,22950508,22946295,63734947,63734946,22945044,76103782,61849159,22943314,22945842,22949040,76952893,22958740,22955108,22963930,22963937,61487751,78453835,78453836,78190323,78190322,22966401,22963938,22955881,22952772,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704023,22959771,78100291,78100305,78100306,75676668,22959690,22947454,22940596,22961456,22958490,22948978,22961457,22963582,65496487,22946251,22964699,74195770,75079286,22964701,22965880,62248964,78100492,78100491,22962630,22951570,22948096,22954294,66161229,66147839,22960015,22949762,22945545,22946824,22951606,22951605,22948122,22946840,22960419,22965961,22960420,22962680,22962685,22962684,22962683,22947641,22961812,22964726,22965877,22965967,22965964,22951601,22946847,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 0</a></span><span><a title="0_1" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,77571254,77571249,83969671,83969602,83969601,83969300,83969562,83969306,83969308,83969311,83969776,83970667,83970668,83970679,83970678,83969787,83969884,83969791,83969889,83969965,62003149,22966553,22966554,22946589,22954701,22948771,22960706,22952457,22952456,69823920,67646833,22956976,22942713,22945900,61574081,22948993,22946660,61574071,67889632,67889631,67889637,22942168,22941119,22939556,22945627,61704033,63784515,69051844,61704067,61704043,22957408,61704040,72391451,72391452,61724192,61975137,61975144,57602828,61541078,22965716,22949679,22964912,22943804,22965887,22943805,81603700,81603658,22960396,22960397,22965904,22959154,22965764,22964822,22946555,22954865,22962698,22949797,75206339,75206338,22962702,22960433,22948128,22960544,22966245">alt 1</a></span><span><a title="0_2" href="https:/www.waze.com/editor/?lon=-71.1181994930557&lat=42.33211431130898&zoom=4&segments=66182276,22523498,22542379,69798169,70183731,70136684,22526478,22551059,22540619,22540617,22521289,22531355,22531357,22523497,77460394,77460392,61690687,67007203,67007202,22959509,22952362,22947304,22946552,73617242,77749675,73617397,22961888,22941066,62110860,83482398,83482876,83482875,22946605,74542235,83482565,83482564,61713972,74882174,74882173,69051742,61975892,65179805,65179806,61713939,77541139,77541140,61975883,22952799,61539504,57601394,22959961,22947692,22959735,22958946,22958947,22958607,22951490,22961077,22964301,22954627,22946241,22963491,76369581,22950499,22966864,22965699,22949657,22962492,22962497,22962496,22946416,22948460,22951483,22948007,22946064,22951140,61459698,22957970,22965738,22954249,22954934,22960321,78858435,22958543,69824727,69824726,22945987,22945859,67102730,77869444,77869443,22966245">alt 2</a></span>
<br>
</div>
<div class="jumbotron" id="distance_large">
<h3>distance large</h3>0_0
<br>
<a href="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)">
<img alt="missing livemap" src="http://livemap-tiles1.waze.com/tiles/internal?lineGeom=(-71.1208,42.3317,-71.1052,42.3261,-71.0872,42.3354,-71.0570,42.3295,-71.0376,42.3394),(-71.1208,42.3317,-71.0754,42.3311,-71.0617,42.3428,-71.0376,42.3394),(-71.1208,42.3317,-71.0675,42.3525,-71.0376,42.3395)"
height="100" width="200">
</a>
<br><span>editor:</span><span><a title="0_0" href="https:/www.waze.com/editor/?"></a>
</div>
css:
.jumbotron{
background:#ddd;
width:220px;
margin:0 auto;
}
.jumbotron img{
display:block;
margin:0 auto;
}
.jumbotron a,.jumbotron span{
display:inline-block;
margin-left:10px;
}
see this fiddle
.jumbotron{
position : relative;
margin: 0 auto;
}
and for being in one line use display: inline-block
Divs are getting pushed? 3 column layout
I am building my website on Bootstrap 2.0. Im trying to make a 3 column layout like on this picture:
http://prntscr.com/1jsb2w The problem is that the divs keep getting pushed (Im a novice in CSS :)
Right now my page looks like this:
http://prntscr.com/1jscbp
My html & css (Note I have done some additional stylings to the html file, Im not including bootstrap.css because I have not done any changes to it. Im not using external stylesheets (except the bootstrap ones)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Foxfile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
margin:50px;
background-image:url(img/noisy_grey.png);
}
#wrapper {
background-image:url(img/noisy_white.png);
border-radius:7px;
}
#projectList {
width:100%;
}
#projectList p,h1,h2,h3,h4,h5,h6,font,a {
padding:10px;
}
#projectList img {
margin:10px;
}
.circle_preview {
border-radius:150px;
background-image:url(img/noisy_grey.png);
height:30px;
width:30px;
padding:10px;
}
footer {
color:#fff;
margin:10px;
font-weight:bold;
}
.position-center {
text-align:center;
position:relative;
}
</style>
<div id='wrapper'>
<div id='projectList'>
<div id='projectListTop'>
<h3> Recent Software </h3>
</div>
<a href='#'> <img class='circle_preview' src='img/avast_icon.png'> Avast Security </a> <br />
<a href='#'> <img class='circle_preview' src='img/itunes_logo.png'> iTunes </a> <br />
<a href='#'> <img class='circle_preview' src='img/utorrent_logo.jpg'> Avast Security </a> <br />
</div>
<div id='projectList' class='position-center'>
<div id='projectListTop'>
<h3> Popular Software </h3>
</div>
<a href='#'> <img class='circle_preview' src='img/avast_icon.png'> Avast Security </a> <br />
<a href='#'> <img class='circle_preview' src='img/itunes_logo.png'> iTunes </a> <br />
<a href='#'> <img class='circle_preview' src='img/utorrent_logo.jpg'> Avast Security </a> <br />
</div>
</div>
</body>
</html>
I've compiled a series of different methods to achieve a 3 column layout as requested by the OP.
http://jsfiddle.net/adaam2/amxUz/4/
Method 1 (Inline Block)
<div class="wrapper">
<div class="inline-block">inline-block</div>
<div class="inline-block">inline-block</div>
<div class="inline-block">inline-block</div>
</div>
CSS:
.wrapper {
width:100%;
}
.inline-block {
display:inline-block;
border:1px solid black;
text-align:center;
background-color:#eee;
width:32%;
}
Note that there is a whitespace issue when setting elements aligned horizontally to inline block.
Method 2 (Table + Table Cell):
<div class="table-wrapper">
<div class="table-cell">table cell</div>
<div class="table-cell">table cell</div>
<div class="table-cell">table cell</div>
</div>
CSS:
.table-wrapper {
display:table;
width:100%;
}
.table-cell {
display:table-cell;
border:1px solid black;
width:33%;
text-align:center;
background-color:red;
}
Method 3 (Float)
<div class="wrapper">
<div class="float">inline-block</div>
<div class="float">inline-block</div>
<div class="float">inline-block</div>
</div>
CSS:
.float {
float:left;
width:33%;
text-align:center;
background-color:pink;
}
* This method is good as you don't encounter the whitespace issue as you do with setting the child elements to inline-block.
If you look at my JsFiddle, I've added some extra styling, including box-sizing:border-box; which allows you to add padding and borders amongst other things without affecting the grid layout.
Image not Going into Divider?
Im working on a website, and Im trying to put a navigation bar in the navigation divider I made, however when I put the image in, it doesnt go into the divider, even though its between the tags.
Heres what it looks like:
Heres My code:
CSS:
body{background-color:#030303}
#wrapper {width:800px;
margin:0 auto;
}
#header {background-color:yellow;
text-align:center;
height:50px;
}
#footer{clear:both;
background-color:yellow ;
text-allign:center;
}
#logo {float:left;
width: 139px;
background-color: black;
text-align: left;
height:70px;}
#navigation {width: 800px;
background-color:#EDEDED;
height:50px;
}
#sidebar {float:left;padding:20px; background-color:green;text-align:right;width:100px;height:460px;}
#content {float:right;width: 620px;
padding:20px; background-color:gray;
text-align:left; height:500px;
border-color:#0017FF;
}
HTML:
<! DOCTYPE html>
<html>
<head> <title>Website</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
This is my header.
</div>
<div id="logo">
<br/>
<img src="images/SubZer0-logo-and-name.png" width="140" height="50" align="left"></div>
<div id="navigation">
<img src="images/subzero-banner-new.png" width="750" height="45" align="top">
</div>
<div id="content">
This is my content box.
</div>
<div id="sidebar">
This is my sidebar.
</div>
<div id="footer">
This is my footer.
</div>
</body>
</html>
How Do I fix this?
Thank you!
Never Mind, I fixed it... Turns out the image was too big for the container.. I dont understand why though, Since the Containter was 800x50 and the image was 750x45, but it works now and thats what matters.