CSS to centre div in gap on right

Question

I'm struggling trying to set up a really basic layout with CSS. I've created the following jsFiddle to help explain (code is copied below).

http://jsfiddle.net/drmrbrewer/10jq4zka/1/

Basically, what I want is for the first, second and third divs to be on one row, with the first and second divs positioned sequentially as far to the left as possible, and for the third div to be centred in the space that remains to the right of the second div. The row should fill 100% horizontally, so that when the window is resized the third div will remain centred within its space to the right of the second div, while the first and second divs remain static.

#outer-container {
  position: absolute;
  width: 100%;
}
#inner-container {
  position: relative;
  width: 400px;
}
#one {
  width: 200px;
  text-align: center;
  float: left;
}
#two {
  width: 200px;
  text-align: center;
  float: left;
}
#three {
  width: 200px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

<div id="outer-container">
  <div id="inner-container">
    <div id="one">one</div>
    <div id="two">two</div>
  </div>
  <div id="three">three</div>
</div>

Satwik Nadkarny · Accepted Answer · 2015-06-30T18:36:16.177

5

I am not sure why you need the inner-container. You can achieve what you are looking for without using the inner-container (if the html is editable, ofcourse).

Let me explain it instead of just giving the code :

You can float the first two div's left. This will align them right next to each other. You can then add a text-align: center on the parent and that will take care of center aligning the third div.

You can check out the JSFiddle link http://jsfiddle.net/b5jk1d6k/ so that you can resize and see that the third div is center aligned on resizing the browser window.

div {
    display:inline-block;
    height: 100px;
    width: 50px;
}
div.outer-container {
    display: block;
    text-align: center;
    width: 100%;
}
.one {
    background-color:orange;
    float:left;
}
.two {
    background-color:red;
    float:left;
}
.three {
    background-color:yellow;
}

<div class="outer-container">
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>

Hope this helps!!!

edited Jun 30 '15 at 18:36

answered Jun 30 '15 at 18:29

Satwik Nadkarny

5,086
2
23
41

Thanks, this is really helpful. I've tried to translate the teaching into my actual site, and sure enough it doesn't quite work as per the simple example. The text in the third div floats to the top for some reason, despite setting a margin-top. Am I allowed to post a link to the site so that you (and others) can have a look at the source directly? – drmrbrewer Jun 30 '15 at 19:17
@drmrbrewer Yes, you can post a link to the site or create a jsfiddle example of your issue (in case you haven't created one before, see the way I have created it). That will help us to to provide solutions specific to the issue you are facing. – Satwik Nadkarny Jun 30 '15 at 19:35
D'oh, it's OK, I figured out why... I was using `span` where it seems like I should have been using `div`. The following put me straight on that issue: http://stackoverflow.com/a/183536/4070848. Now it's working. – drmrbrewer Jun 30 '15 at 19:36
Quick follow-up: is the use of `text-align` a recommended approach even when you're not using the div for text? See e.g. http://jsfiddle.net/drmrbrewer/b5jk1d6k/1/ – drmrbrewer Jun 30 '15 at 19:48
@drmrbrewer Yes, it is. `text-align: center` is regularly used to center content. That content can be textual or containers. – Satwik Nadkarny Jun 30 '15 at 19:52
@drmrbrewer You can also use `margin: 0 auto` trick. That will also help you to center content.See ->http://jsfiddle.net/17uamn1n/ . Just toggle the `margin` property. – Satwik Nadkarny Jun 30 '15 at 19:55
Does the `margin: 0 auto` trick work in this example? That's the approach I was originally *trying* (unsuccessfully!!) to take. – drmrbrewer Jun 30 '15 at 20:13

xxSithRagexx · Answer 2 · 2015-06-30T20:56:26.593

2

Adding on to Satwik Nadkarny's Answer, if you know that div 1 and 2 are set to 200px you can set 3 to the remaining by giving the width of div 3 too:

width: calc (100% - 400px);

Which just gets the width of the browser window and subtracts the width of both divs 1 and 2.

div {
  display:inline-block;
  height: 100px;
  width: 50px;
}

div.outer-container {
  display: block;
  text-align: center;
  width: 100%;
}

.one {
  background-color:orange;
  float:left;
  width: 200px;
}
.two {
  background-color:red;
  float:left;
  width: 200px;
}

.three {
  background-color:yellow;
  width: calc(100% - 400px);
}

edited Jun 30 '15 at 20:56

answered Jun 30 '15 at 18:48

xxSithRagexx

193
1
1
13

Cool, I didn't know about `calc()`, but had wondered earlier today whether something like that were possible. Thanks. – drmrbrewer Jun 30 '15 at 19:21
1

Yeah, for the most part CSS does not use traditional statements like IF or ELSE. However, it does have the ability to do math which can be extremely powerful! – xxSithRagexx Jun 30 '15 at 19:23

CSS to centre div in gap on right

2 Answers2