Home/ Questions/Q 6255493
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T14:22:32+00:00

How can I set spacing between divs to auto inside fluid width parent div?

  • 0

How can I set spacing between divs to “auto” inside fluid width parent div? Is it even possible with CSS only?
More specific:
I have some parent div width width: 90%. I have 3 inline elements inside it. I want first element to touch left side of my parent div, second element to be in middle, and last element to touch right side of the parent div.

@edit:
I’m adding some code:

#news-pane {
    margin: 50px auto;
    width: 90%;
}

#news {
    color: #333;
    width: 300px;;
    vertical-align: top;
    display: inline-block;
}

#news img {
    max-width: 300px;
    height: auto;
}

HTML:

<ul id="news-pane">
    <li id="news">
        <div id="news-header">
           <h1>Title</h1><span>Date</span>
        </div>
        <p><News content</p>
    </li>
    <li id="news">
        <div id="news-header">
           <h1>Title</h1><span>Date</span>
        </div>
        <p><News content</p>
    </li>
    <li id="news">
        <div id="news-header">
           <h1>Title</h1><span>Date</span>
        </div>
        <p><News content</p>
    </li>
</ul>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can make the first element float:left, the second element with auto margins and the third element float:right. AFAIK the elements have to be block for this to work.

    demo: http://jsfiddle.net/2CmSK/

    EDIT after seeing the code: The main problem is that you’re using the same id for multiple elements. You have to use unique ids or use classes instead. The HTML is invalid right now and might behave unpredictably in different browsers.

    The second problem is that the outer div’s width is given in percentages and the news items’ width is given in pixels. If the user’s browser window is less than 1000px wide the outer div will be less than 900px wide and the news items won’t fit inside.

    And between the lines I’m reading that you’re using some kind of closed/standard tool to generate the news items so you can’t modify the code and they all have to have the same structure. If this is the case then no, you can’t have them behave differently if they are structurally identical without using JavaScript.

    • 0