0

I am using w3.css. So you need this in your header:

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

I want to have a twothird container (coloured green so it is easy to see it), centered in the middle of the page, but with the internal text of the twothird container appearing on the left of the container. Ie the green area is central in the white page, but the text is on the left of the green area.

This does not work (it just appears on the left):

<div class="w3-container w3-center">
    <div class="w3-container w3-twothird w3-left w3-green">
        Some profound utterance.
    </div>
</div>

Edit:

This is the solution based on the idea presented by albydamed.

<div class="w3-row">
    <div class="w3-col w3-container s0 m1 l1"></div>
    <div class="w3-col w3-container s12 m10 l10 w3-green" style="text-align: left;">
        Some profound utterance
    </div>
    <div class="w3-col w3-container s0 m1 l1"></div>
</div>

In the above 's' refers to small screens (phones), 'm' refers to medium screens (tablets) and 'l' refers to large screens. <div class="w3-row"> is the containing div for 3 column divs. In each of s, m and l the sum of the internal columns must add to 12, as the screen is split into 12 invisible columns.

In my 'm' and 'l' case I split the 3-columns 1-10-1 (must always add to 12). So my middle div takes up 10/12 of the screen width. However, in my 's' case I split it 0-12-0, instructing my middle column to take up the full width of the phone.

Rewind
  • 2,554
  • 3
  • 30
  • 56
  • https://jsfiddle.net/4d8j26ev/ (remove float from w3-twothird div and add margin: 0 auto;) ... but the w3-css has media queries that throw off layout on small screens. Is it necessary that you use that stylesheet? – deebs Jun 30 '16 at 18:53
  • Deebs. This almost works, but does not seem to be 2/3 on my machine. – Rewind Jun 30 '16 at 19:13
  • See my answer below. I added width styling inline. Or you could add a class, with "width: 66.67% !important" to override the W3-twothirds class with 100% width on smaller screens. – deebs Jun 30 '16 at 19:52

2 Answers2

1

Apply css to the text inside your container.

CSS:

.left {
    text-align: left;
}

HTML:

<div class="w3-container w3-center">
    <div class="w3-container w3-twothird w3-green">
        <p class="left">Some profound utterance.</p>
    </div>
</div>

Although, if you really want it centered I would remove w3-two-third. That restricts where it is placed. I would recommend a more responsive design like this: 

<div class="w3-row">
    <div class="w3-container w3-quarter"></div>
    <div class="w3-container w3-green w3-half">
        <p class="left">Some profound utterance.</p>
    </div>
    <div class="w3-container w3-quarter"></div>
</div>
albydarned
  • 123
  • 1
  • 10
  • This is nearly there. But a half is not enough for the middle section. – Rewind Jun 30 '16 at 19:11
  • Well, if you want two thirds but centered, try setting the green container's class width to 66% and the two on either side to 33%. You can define your widths on your own. You may need to use "!important" in the css to override w3.css. I just chose half because it is the biggest block that could contain even space on either side. – albydarned Jun 30 '16 at 20:01
  • Thank. Your final comment did the trick, but I have mark the other as the answer, as it required less to do. – Rewind Jun 30 '16 at 20:05
  • It might seem easier now, but could become more of pain later. Inline CSS is not very editable in the future. You could apply my design to multiple pages on your site using the CSS class. Later if you wanted to change something, you would only need to change the CSS class and it would update on all pages rather than having to change each inline CSS property on each page. The design I provided is also responsive. Just my two-cents. – albydarned Jul 01 '16 at 17:55
  • After a day of tinkering on reflection I think you *template* is the right way to go. I got a bit more precision with the following. Perhaps you can update your answer to include this option as well:
    Some profound utterance
     – Rewind Jul 01 '16 at 22:05
  • I think it is probably fine left here in the comments. Put your code within ' ' and it will show up as code in the comments. What is the s12 m10 etc. stuff in your code? – albydarned Jul 05 '16 at 14:20
  • The page is split into 12 parts. 's' means use this split for small screens. Within the containing div (the w3-row) I have 3 divs and say for small screens (phones) they are split 0-12-0, ie the middle div is the full width (12 columns). For large 'l' (desktops) and medium 'm' (tablets) screens I split the divs to have 1-10-1 of the 12 column split (note it always adds to 12). This gives me a lot more precision of how to split the screen between phones and desktops. It looks nice in the final result as well. So thanks to your original idea which led me to this. – Rewind Jul 06 '16 at 18:31
  • Great! Glad I could be of help. Thanks for choosing my answer. – albydarned Jul 06 '16 at 19:17
0

The classes have to be changed slightly for the text alignment, and you'll need to add a class with the "!important" tag following width or, in this example, inline style:

<div class="w3-content">
    <div class="w3-container w3-twothird w3-green" style="float: none; margin: 0 auto; width: 66.67% !important;">
        Some profound utterance.
    </div>
</div>

JsFiddle

deebs
  • 1,390
  • 10
  • 23