0

Here is a demo of the structure of my website page I'm working on: http://jsfiddle.net/kz5ch49w/2/

As you can see, there are 5 blocks : body (in grey), header (in red), footer (in green), left block (in yellow) and right block (in black).

<body>
  <div id="header"></div>
    <div id="content">
      <div id="left-block"></div>
      <div id="right-block"><p>...long text...</p></div>
    </div>
  <div id="footer"></div>
</body>

Do you think my structure is OK? (you can see the CSS in the JSFiddle demo)

My problem is that I don't understand why the columns with text are so thin and why only the first column is black. I tried too to put a "padding:20px" to the right-block but it didn't work (columns are over 100% height). Should I make a new div in the right-block div?

Could you please help me?

Here is the last JSFiddle demo update: http://jsfiddle.net/kz5ch49w/3/

2
  • My recommendation is to use percentages, which will make the columns respond to viewport width. Now, this will make them thin in cases where the viewport is small, like on JSFiddle, for which you can use CSS Media Queries to change the size and positioning of the elements dynamically based on viewport width. Commented Jan 15, 2015 at 7:01
  • Thank you for your answer : header, footer and left-block are OK. But the black background still doestn't fill the entire right-block (there are one zone in black, and one zone in grey).
    – Guillaume
    Commented Jan 15, 2015 at 7:12

5 Answers 5

2

Try this : Replace your css with this css:

body { background: none repeat scroll 0 0 grey;
    float: left;
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    width: 100%; }
#header {
    background: none repeat scroll 0 0 red;
    float: left;
    height: 80px;
    left: 0;
    top: 0;
    width: 100%;
}
#content {
    float: left;
    overflow: hidden;
    width: 100%;
}

#left-block {
    background: none repeat scroll 0 0 yellow;
    float: left;
    height: 250px;
    width: 25%;
}
#right-block {
    -moz-column-gap: 40px;
    -moz-columns: auto 300px;
    background: none repeat scroll 0 0 black;
    color: white;
    float: left;
    font-family: "open sans";
    font-size: 15px;
    font-weight: 100;
    height: 100%;
    left: 300px;
    text-align: left;
    width: 75%;
}
#footer {
    background: none repeat scroll 0 0 green;
    float: left;
    height: 80px;
    width: 100%;
} 
1
  • Unfortunately, it doesn't seem to fix it (just one big column and it generates a vertical scrollbar). I made some personal changes on the jsfiddle demo and it's better than my first try : jsfiddle.net/kz5ch49w/3 But the black background still doesn't fill the entire right-block, and I also don't know how to fix the padding:20px issue.
    – Guillaume
    Commented Jan 15, 2015 at 6:29
1

You're having an overflow problem. The content in #text is overflowing way past the dimensions of the div. Because of this, it doesn't extend. You'll need to tell CSS what to do for the overflow, which I've done here where it's been fixed.

To #right-block, I've added overflow-y: auto, meaning if it gets too long and there's still stuff overflowing, it'll add a scrollbar.

Also, to #text, I've added box-sizing: border-box; so that the padding doesn't make the box any larger, affecting the dimensions. This can cause vertical scrolling sometimes, which it seems like you're trying to avoid.

Hope this was helpful!

2
  • 1
    Further, I would recommend looking up CSS overflow to really fine-tune this fix.
    – Tejas
    Commented Jan 15, 2015 at 8:28
  • Thank you very much for your help, it's almost what I wanted. I wanted too the left-box to be scrollable with the right-block. This is what I made here : jsfiddle.net/kz5ch49w/36 But, now, I would like the horizontal scrollbar to be at the bottom of the page.
    – Guillaume
    Commented Jan 15, 2015 at 14:54
0

Try this.

     #content {
top: 80px;
bottom: 80px;
position: relative;
}
1
  • Thank you for your answer but there's no horizontal scrollbar anymore, the black background isn't visible and the yellow left block either. jsfiddle.net/kz5ch49w/27
    – Guillaume
    Commented Jan 15, 2015 at 7:03
0

Please remove all position from your code . And for side menu just add float:left or float:right . jsfiddle link

body {
background:grey;
margin:0;
padding:0;
}

#header {
width:100%;
height:80px;
left:0;
top:0;
background:red;
}

#content {
top:80px;
bottom:80px;
width:700px;
height:900px;
}

#left-block {
background:#FF0;
width:100px;
height:100%;
float:left;
}

#right-block {
background:#000;
left:100px;
width:auto;
height:100%;
float:right;
font-size:15px;
text-align:left;
color:#FFF;
font-family:'open sans';
-webkit-column-width:300px;
-webkit-column-gap:40px;
-moz-column-width:300px;
-moz-column-gap:40px;
-moz-column-count:auto;
column-width:300px;
column-gap:40px;
font-weight:100;
}

#footer {
width:100%;
height:80px;
left:0;
bottom:0;
background:green;
}
2
  • Thank you for your answer, columns text are OK but the footer isn't visible anymore and the left block either. jsfiddle.net/kz5ch49w/26
    – Guillaume
    Commented Jan 15, 2015 at 7:00
  • Looks like you got your answer. CHeers Commented Jan 15, 2015 at 7:11
0
    @Guillaume: I think it may be resolved. Please check this code and follow this link.
http://jsfiddle.net/kz5ch49w/32/


    <body>
    <style>
    .ftDiv{ max-width:1000px; margin:auto;}
    #header { width: 100%; background:#F00; padding:10px; color:#fff; font-weight:700; text-align:center;}
    #content { display:table;}
    #left-block {  background:#CF3; width:30%; display:table-cell; vertical-align:middle; text-align:center;} 
    #right-block { padding:10px;  background:#000;  font-size:15px; text-align: left; color:#FFF; font-family:'open sans';font-weight:100; display:table-cell; width:67.5%;  vertical-align:top;}
    #footer { width: 100%; height:80px;background:#090; text-align:center; color:#fff; display:inline-block; vertical-align:middle; }
    </style>
    <div class="ftDiv">

    <div id="header">Header Part Here</div>

    <div id="content">

    <div id="left-block">Left Part Here</div>

    <div id="right-block">

    <p>Sed (saepe enim redeo ad Scipionem, cuius omnis sermo erat de amicitia) querebatur, quod omnibus in rebus homines diligentiores essent; capras et oves quot quisque haberet, dicere posse, amicos quot haberet, non posse dicere et in illis quidem parandis adhibere curam, in amicis eligendis neglegentis esse nec habere quasi signa quaedam et notas, quibus eos qui ad amicitias essent idonei, iudicarent. Sunt igitur firmi et stabiles et constantes eligendi; cuius generis est magna penuria. Et iudicare difficile est sane nisi expertum; experiendum autem est in ipsa amicitia. Ita praecurrit amicitia iudicium tollitque experiendi potestatem.</p>

    <p>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.</p>

    <p>Et hanc quidem praeter oppida multa duae civitates exornant Seleucia opus Seleuci regis, et Claudiopolis quam deduxit coloniam Claudius Caesar. Isaura enim antehac nimium potens, olim subversa ut rebellatrix interneciva aegre vestigia claritudinis pristinae monstrat admodum pauca.</p>

    <p>Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?</p>

    <p>Quibus ita sceleste patratis Paulus cruore perfusus reversusque ad principis castra multos coopertos paene catenis adduxit in squalorem deiectos atque maestitiam, quorum adventu intendebantur eculei uncosque parabat carnifex et tormenta. et ex is proscripti sunt plures actique in exilium alii, non nullos gladii consumpsere poenales. nec enim quisquam facile meminit sub Constantio, ubi susurro tenus haec movebantur, quemquam absolutum.</p>

    <p>Sed laeditur hic coetuum magnificus splendor levitate paucorum incondita, ubi nati sunt non reputantium, sed tamquam indulta licentia vitiis ad errores lapsorum ac lasciviam. ut enim Simonides lyricus docet, beate perfecta ratione vieturo ante alia patriam esse convenit gloriosam.</p>

    <p>Exsistit autem hoc loco quaedam quaestio subdifficilis, num quando amici novi, digni amicitia, veteribus sint anteponendi, ut equis vetulis teneros anteponere solemus. Indigna homine dubitatio! Non enim debent esse amicitiarum sicut aliarum rerum satietates; veterrima quaeque, ut ea vina, quae vetustatem ferunt, esse debet suavissima; verumque illud est, quod dicitur, multos modios salis simul edendos esse, ut amicitiae munus expletum sit.</p>

    <p>Fieri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? cum praesertim illa perdiscere ludus esset. Quam ob rem dissentientium inter se reprehensiones non sunt vituperandae, maledicta, contumeliae, tum iracundiae, contentiones concertationesque in disputando pertinaces indignae philosophia mihi videri solent.</p>

    <p>Hacque adfabilitate confisus cum eadem postridie feceris, ut incognitus haerebis et repentinus, hortatore illo hesterno clientes numerando, qui sis vel unde venias diutius ambigente agnitus vero tandem et adscitus in amicitiam si te salutandi adsiduitati dederis triennio indiscretus et per tot dierum defueris tempus, reverteris ad paria perferenda, nec ubi esses interrogatus et quo tandem miser discesseris, aetatem omnem frustra in stipite conteres summittendo.</p>

    <p>Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium, milite per omnia diffuso propinqua, magnis undique praesidiis conmunitam.</p>

    <p>Sed (saepe enim redeo ad Scipionem, cuius omnis sermo erat de amicitia) querebatur, quod omnibus in rebus homines diligentiores essent; capras et oves quot quisque haberet, dicere posse, amicos quot haberet, non posse dicere et in illis quidem parandis adhibere curam, in amicis eligendis neglegentis esse nec habere quasi signa quaedam et notas, quibus eos qui ad amicitias essent idonei, iudicarent. Sunt igitur firmi et stabiles et constantes eligendi; cuius generis est magna penuria. Et iudicare difficile est sane nisi expertum; experiendum autem est in ipsa amicitia. Ita praecurrit amicitia iudicium tollitque experiendi potestatem.</p>

    <p>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.</p>

    <p>Et hanc quidem praeter oppida multa duae civitates exornant Seleucia opus Seleuci regis, et Claudiopolis quam deduxit coloniam Claudius Caesar. Isaura enim antehac nimium potens, olim subversa ut rebellatrix interneciva aegre vestigia claritudinis pristinae monstrat admodum pauca.</p>

    <p>Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?</p>

    <p>Sed (saepe enim redeo ad Scipionem, cuius omnis sermo erat de amicitia) querebatur, quod omnibus in rebus homines diligentiores essent; capras et oves quot quisque haberet, dicere posse, amicos quot haberet, non posse dicere et in illis quidem parandis adhibere curam, in amicis eligendis neglegentis esse nec habere quasi signa quaedam et notas, quibus eos qui ad amicitias essent idonei, iudicarent. Sunt igitur firmi et stabiles et constantes eligendi; cuius generis est magna penuria. Et iudicare difficile est sane nisi expertum; experiendum autem est in ipsa amicitia. Ita praecurrit amicitia iudicium tollitque experiendi potestatem.</p>

    <p>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.</p>

    <p>Et hanc quidem praeter oppida multa duae civitates exornant Seleucia opus Seleuci regis, et Claudiopolis quam deduxit coloniam Claudius Caesar. Isaura enim antehac nimium potens, olim subversa ut rebellatrix interneciva aegre vestigia claritudinis pristinae monstrat admodum pauca.</p>

    <p>Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?</p>

    </div>

    </div>

    <div id="footer">Footer Part Here</div>
    </div>
    </body>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.