CSS coder help! CENTER <div>

Started
Last post
17 Responses

benfal99
Check this image :
HOW can I center those <div> ???
benfal99
Flag
vaxorcist0
can you show your HTML code, doctype may impact here....
vaxorcist 0Permalink
Upvote Downvote
Dogear
Flag
Show [[ numHiddenNotes ]] more notes Add Note
Save Cancel
Al_dizzle0
set the width of the inner div then margin-left:auo; margin-right:auto; ?
Al_dizzle 0Permalink
Upvote Downvote
Dogear
Flag
- wrap those columns into another div, set the width, then rmake the margin left and right: auto;
  
  Al_dizzle
Show [[ numHiddenNotes ]] more notes Add Note
Save Cancel
benfal990
HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="bnfl-css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header" id="menu">Content for class "header" id "menu" Goes Here</div>
<div id="illustrations">
<p>Illustrations</p>
<div class="big_block" id="bigblock">
<p><img src="barthelme_2.jpg" width="125" height="143" /></p>
<p><img src="uoft.jpg" width="125" height="164" /></p>
<p><img src="barthelme_2.jpg" alt="" width="125" height="143" /></p>
<p><img src="uoft.jpg" alt="" width="125" height="164" /></p>
</div>
<div class="big_block2" id="bigblock2">
<p><img src="barthelme_2.jpg" width="125" height="143" /></p>
<p><img src="uoft.jpg" width="125" height="164" /></p>
<p><img src="barthelme_2.jpg" alt="" width="125" height="143" /></p>
<p><img src="uoft.jpg" alt="" width="125" height="164" /></p>
</div>
<div class="big_block" id="bigblock3">
<p><img src="barthelme_2.jpg" width="125" height="143" /></p>
<p><img src="uoft.jpg" width="125" height="164" /></p>
<p><img src="barthelme_2.jpg" alt="" width="125" height="143" /></p>
<p><img src="uoft.jpg" alt="" width="125" height="164" /></p>
</div>
<div class="big_block2" id="bigblock4">
<p><img src="barthelme_2.jpg" width="125" height="143" /></p>
<p><img src="uoft.jpg" width="125" height="164" /></p>
<p><img src="barthelme_2.jpg" alt="" width="125" height="143" /></p>
<p><img src="uoft.jpg" alt="" width="125" height="164" /></p>
</div>
<p> </p>
</div>
<div id="design">
<p>Design</p>
<div class="big_block" id="bigblock5">
<p><img src="barthelme_2.jpg" width="125" height="143" /></p>
<p><img src="uoft.jpg" width="125" height="164" /></p>
<p><img src="barthelme_2.jpg" alt="" width="125" height="143" /></p>
<p><img src="uoft.jpg" alt="" width="125" height="164" /></p>
</div>
<div class="big_block2" id="bigblock6">
<p><img src="barthelme_2.jpg" width="125" height="143" /></p>
<p><img src="uoft.jpg" width="125" height="164" /></p>
<p><img src="barthelme_2.jpg" alt="" width="125" height="143" /></p>
<p><img src="uoft.jpg" alt="" width="125" height="164" /></p>
</div>
</div>
<div id="photos">
<p>Photos</p>
<div class="big_block" id="bigblock7">
<p><img src="barthelme_2.jpg" width="125" height="143" /></p>
<p><img src="uoft.jpg" width="125" height="164" /></p>
<p><img src="barthelme_2.jpg" alt="" width="125" height="143" /></p>
<p><img src="uoft.jpg" alt="" width="125" height="164" /></p>
</div>
</div>
<div class="big_block2" id="bigblock8">
<p><img src="barthelme_2.jpg" width="125" height="143" /></p>
<p><img src="uoft.jpg" width="125" height="164" /></p>
<p><img src="barthelme_2.jpg" alt="" width="125" height="143" /></p>
<p><img src="uoft.jpg" alt="" width="125" height="164" /></p>
</div>
<div class="big_block" id="bigblock9">
<p><img src="barthelme_2.jpg" width="125" height="143" /></p>
<p><img src="uoft.jpg" width="125" height="164" /></p>
<p><img src="barthelme_2.jpg" alt="" width="125" height="143" /></p>
<p><img src="uoft.jpg" alt="" width="125" height="164" /></p>
</div>
<div class="big_block2" id="bigblock10">
<p><img src="barthelme_2.jpg" width="125" height="143" /></p>
<p><img src="uoft.jpg" width="125" height="164" /></p>
<p><img src="barthelme_2.jpg" alt="" width="125" height="143" /></p>
<p><img src="uoft.jpg" alt="" width="125" height="164" /></p>
</div>
<div class="big_block" id="bigblock11">
<p><img src="barthelme_2.jpg" width="125" height="143" /></p>
<p><img src="uoft.jpg" width="125" height="164" /></p>
<p><img src="barthelme_2.jpg" alt="" width="125" height="143" /></p>
<p><img src="uoft.jpg" alt="" width="125" height="164" /></p>
</div>
<div class="big_block2" id="bigblock12">
<p><img src="barthelme_2.jpg" width="125" height="143" /></p>
<p><img src="uoft.jpg" width="125" height="164" /></p>
<p><img src="barthelme_2.jpg" alt="" width="125" height="143" /></p>
<p><img src="uoft.jpg" alt="" width="125" height="164" /></p>
</div>
</body>
</html>
benfal99 0Permalink
Upvote Downvote
Dogear
Flag
- I think you forgot to close
  <div id="illustrations">Al_dizzle
- ...sorry you did close it. ignore me.Al_dizzle
- *ignoredbenfal99
Show [[ numHiddenNotes ]] more notes Add Note
Save Cancel
benfal990
CSS :
@charset "utf-8";
/* Le corps de la page */
body {
background-color: #FFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
/* Le menu en haut */
#menu {
background-color: #999;
position: fixed;
width: 100%;
height: 55px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 22px;
color: #000;
text-shadow: 5px 0px #999;
font-weight: bold;
top: 0px;
}
/* Les colonnes d'images */
#bigblock, #bigblock2, #bigblock3, #bigblock4, #bigblock5, #bigblock6, #bigblock7, #bigblock8, #bigblock9, #bigblock10, #bigblock11, #bigblock12 {
background-color: #F8F8F8;
text-align: center;
display: block;
width: 125px;
float: left;
clear: none;
padding: 1px;
margin: 6px;
border: 1px dotted;
border-color: #999;
}
#illustrations, #design, #photos {
width: ...;
margin-left: auto;
margin-top: 8px;
margin-right: auto;
margin-bottom: 8px;
text-align: center;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
color: #666;
font-weight: bold;
text-shadow: 2px 2px 2px #CCC;
display: block;
overflow: auto;
}
benfal99 0Permalink
Upvote Downvote
Dogear
Flag
- /* Les colonnes d'images */ are the columns with images.benfal99
- #illustrations, #design, #photos are the big block containing the columns of imagesbenfal99
Show [[ numHiddenNotes ]] more notes Add Note
Save Cancel
benfal990
I changed the top of my code for :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
Didn't change anything.
benfal99 0Permalink
Upvote Downvote
Dogear
Flag
Show [[ numHiddenNotes ]] more notes Add Note
Save Cancel
benfal990
any help?
benfal99 0Permalink
Upvote Downvote
Dogear
Flag
Show [[ numHiddenNotes ]] more notes Add Note
Save Cancel
orrinward20
Put all this into a JSFiddle or Codepen file and someone will fork and fix it quickly.
orrinward2 0Permalink
Upvote Downvote
Dogear
Flag
Show [[ numHiddenNotes ]] more notes Add Note
Save Cancel
orrinward20
You could:
1.make the "Big DIV" text-align:center;
2. make the 2 smaller divs display:inline-block
orrinward2 0Permalink
Upvote Downvote
Dogear
Flag
- didnt' work... :(benfal99
Show [[ numHiddenNotes ]] more notes Add Note
Save Cancel
ESKEMA0
What's the:
width:...;
in #illustrations?
ESKEMA 0Permalink
Upvote Downvote
Dogear
Flag
- an error i made. I correct it and it didnt change aythingbenfal99
Show [[ numHiddenNotes ]] more notes Add Note
Save Cancel
benfal990
CodePen :
http://codepen.io/anon/full/oblq…
benfal99 0Permalink
Upvote Downvote
Dogear
Flag
Show [[ numHiddenNotes ]] more notes Add Note
Save Cancel
Al_dizzle0
http://codepen.io/anon/full/oblq…
Al_dizzle 0Permalink
Upvote Downvote
Dogear
Flag
Show [[ numHiddenNotes ]] more notes Add Note
Save Cancel
aliastime0
Kind of a hack, but if you don't put a width on the divs you want centered, you can try display table.
http://pastebin.com/nvteHksx
aliastime 0Permalink
Upvote Downvote
Dogear
Flag
Show [[ numHiddenNotes ]] more notes Add Note
Save Cancel
Al_dizzle0
sorry I fixed it on my end but I dont know how to use codepen.
hold on
Al_dizzle 0Permalink
Upvote Downvote
Dogear
Flag
Show [[ numHiddenNotes ]] more notes Add Note
Save Cancel
Al_dizzle0
hows this.... http://codepen.io/anon/full/sqGw… ?
Al_dizzle 0Permalink
Upvote Downvote
Dogear
Flag
- I shared when I should have forked.Al_dizzle
- almost there... the big block is centered but the columns still aligned left in itbenfal99
- you're welcome... I have to go do my own work now.Al_dizzle
- sure. thanks a lot Albenfal99
Show [[ numHiddenNotes ]] more notes Add Note
Save Cancel
Al_dizzle0
you had the width set to 950 ... but you forgot the px.
Also you closed the photos div too early.
Al_dizzle 0Permalink
Upvote Downvote
Dogear
Flag
- thanks :)benfal99
Show [[ numHiddenNotes ]] more notes Add Note
Save Cancel
ESKEMA0
I added a container div surrounding all your #illustration etc...
http://codepen.io/anon/full/ivCn…
ESKEMA 0Permalink
Upvote Downvote
Dogear
Flag
Show [[ numHiddenNotes ]] more notes Add Note
Save Cancel
benfal990
thanks you all for the help. I think i will go where I wanted with your help.!
THANKS!
benfal99 0Permalink
Upvote Downvote
Dogear
Flag
Show [[ numHiddenNotes ]] more notes Add Note
Save Cancel