Column width & space between columns

  • nickwilliamchambers

    (@nickwilliamchambers)


    11 years, 1 month ago

    Hi, I’m having trouble controlling the column width (making wider) and decreasing the space between columns. I would also like a thin black line separating each column (wish list). Can anyone help me please. Nick

    http://monkschapel.com/test

     
    <div style=”background-image: url(‘http://monkschapel.com/wp-content/uploads/2015/04/monks-test.jpg&#8217;); background-repeat: no-repeat; height: 637px; width: 950px; margin-top: 20px;”>
    <h1 style=”color: black; line-height: 18px; padding: 20px 10px 2px 20px;”>This is a Sample Headline</h1>
    <p style=”color: black; padding: 2px 10px 10px 20px;”>This is sample paragraph text on top of an image. You may need to change the color of the text so it’s readable over the image.</p>

    <div style=”width: 32%; padding: 0 10px 0 0; float: left;”>Your content for your column #1
    Your content for your column #1
    Your content for your column #1</div>
    <div style=”width: 32%; padding: 0 10px 0 0; float: left;”>Your content for your column #2
    Your content for your column #2
    Your content for your column #2</div>
    <div style=”width: 32%; padding: 0 10px 0 0; float: right;”>Your content for your column #3
    Your content for your column #3
    Your content for your column #3</div>
    <div style=””clear: both;”></div>
    </div>

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 1 month ago

    Are you sure that you’ve linked the right page?

    Thread Starter nickwilliamchambers

    (@nickwilliamchambers)

    11 years, 1 month ago

    Hi Andrew, thanks for replying.. The page was private, I’ve now made it public should work now. I’ve got to go to pop over to Monks Chapel now, so I won’t see your reply till 5pm..Nick

    martcol

    (@hotmale)

    11 years, 1 month ago

    I may be misunderstanding you but the distance between the divs appears wider than it is because the content doesn’t fill the element.

    They are floated divs rather than columns.

    Thread Starter nickwilliamchambers

    (@nickwilliamchambers)

    11 years, 1 month ago

    The website link is http://monkschapel.com/test

    Forgive me but I’m not familiar enough with code. Not sure what element is. How do I make the content fill the element.

    Can you adjust my code so that I get wider divs (columns) with less space between.

    Not sure what you mean by the code.

    Allowed markup: a blockquote code em strong ul ol li.
    Put code in between backticks.

    Thread Starter nickwilliamchambers

    (@nickwilliamchambers)

    11 years, 1 month ago

    Can someone please tell me what code I need to have 3 columns (instead of floating Div’s), with a width and spacing I can control?

    With a full page background that the text will overlay.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 1 month ago

    So you fixed this?

    Thread Starter nickwilliamchambers

    (@nickwilliamchambers)

    11 years, 1 month ago

    Hi Andrew, no it isn’t fixed yet.

    I’m hoping someone can fix my code so that the columns (martcol calls them divs) can be wider, and the space between them less (which may naturally occur if they are wider)

    http://monkschapel.com/test

    The text is on top of a 50% transparent image. I would also like a thin black line separating the columns as in a newspaper style.

    I’ve tried adjusting the percentage and px values but nothing changes.

    Do you know how I might achieve any of this?….Nick

    martcol

    (@hotmale)

    11 years, 1 month ago

    Here’s an article about CSS columns:

    https://css-tricks.com/guide-responsive-friendly-css-columns/

    If you want more, there’s plenty out there if you search on CSS columns.

    It’s not too difficult to understand but it is a bit tricky (for me at least) to offer up in a forum post.

    Your current design is OK. All that is happening is your dummy content isn’t filling it out. If your line of text was one or two more words long it would. So, you need to think about what content is going in there.

    Thread Starter nickwilliamchambers

    (@nickwilliamchambers)

    11 years, 1 month ago

    Thanks for replying. Yes I have put more text in and it has done what you said. Thats great thank you. I will check out the article. Thanks again for your help and everyone who replied….Nick

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Column width & space between columns’ is closed to new replies.

Tags