Asked  6 Months ago    Answers:  5   Viewed   26 times

Consider the following code:

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}
<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

I would like the two divs to be next to each other inside the wrapper div. In this case, the height of the green div should determine the height of the wrapper.

How could I achieve this via CSS ?

 Answers

40

Float one or both inner divs.

Floating one div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

or if you float both, you'll need to encourage the wrapper div to contain both the floated children, or it will think it's empty and not put the border around them

Floating both divs:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}
Tuesday, June 1, 2021
 
Sanguine
answered 6 Months ago
97

h(n) elements are 'block' elements, which means they will grow to take all available horizontal space. This also means they will push anything "right" of them down to the next line.

One easy way to accomplish this is to set their display to inline:

<style>
    h5, h6 {display:inline;}
</style>

Note that inline-block is not supported in all browsers.

You can also float block elements, but that can become a sticky issue as floating can be fairly complex. Stick with inline for cases like this.

Sunday, August 15, 2021
 
viky
answered 4 Months ago
65

Yes it is via the new step-function easing curves property.

Instead of "ease-in" etc. use "step-start" or "step-end" which will make the transition happen instantaneously either at the beginning or end of the time period specified in transition-duration.

You can also have multiple steps: "steps(N, start | end ])" which will have the transition happen in equally spaced steps.

AFAIK this is only supported in Chrome to date.

Wednesday, August 25, 2021
 
xosp7tom
answered 3 Months ago
19

Boilerplate's css uses few hacks like * (*font-size:small;) and some browser specific css rules - if you are really concerned about validation just move the hacky rules out of the main style.css and load them for the browser that needs them only.

You can be either hacky and crossbrowser or valid and degraded. And don't forget that boilerplate also states:

Think there's too much? The HTML5 Boilerplate is delete-key friendly. :)

But if you ask me - its waste of time trying to pass the css validation and still be crossbrowser compatible - if your client demands it and has extra money to pay for the css valid badge (which probably won't generate them any extra income) than go for it, if you personaly are obsessed by having to pass it go for it - otherwise it's nonsense and waste of your time. If you wrote all of the valid css3 rules correctly and used a few vendor specific rules it won't really kill anyone.

Overall Boilerplate is a solid template and perfectly ok to use for every day projects and the problems you are exposing are more of a perfectionist's view on the thing. This would be my 2 cents on this.

Sunday, October 10, 2021
 
Jakob Gade
answered 2 Months ago
23

First of all, you should target the names of the elements that appear in your HTML. Looks like your CMS appends some sort of preffix and your ids doesn't match. (You have #footerleftpane but it renders as #dnn_footerleftpane)

Also, as you are using a fixed width container there is no use to the troubles generated by not passing a width to the middle container. Give it a width and see if it works. If it doesn't you can try two more methods, if your blocks are in the correct source order (left, center, right).

  1. You can float them all left, making sure its widths and paddings fit on the container.

    #dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
      width: 300px;
      float: left;
      ....
    }
    
  2. You can use display: inline-block, also making sure to fit your widths and paddings on the container

    #dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
      ....
      display: inline-block;
      ...
    }
    
Friday, October 29, 2021
 
mcography
answered 1 Month ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share