putting 2 objects side by side, where 1 has a fixed size in css

StackOverflowed

I'm trying to put 2 elements side by side, where the second element has a fixed width of 100pixels, and the first one is to take up all the space beside it. (So if the width is 900 pixels, it would be 800 pixels).

I tried doing it with percents but obviously different screen resolutions will mess it up completely. (Basically, if you've done Android programming, what I'm trying to do is have one object that's 100pixels, and the other to be of match_parent width to fill out the rest of the LinearLayout). Is this possible in pure CSS? I'm using Bootstrap 3 if that helps.

user1793182

You don't have to use absolute pos. Any method will work it just depends on how detailed you want to get. If you want container1 to have a background equal to container2 simply wrap both of them in a main container div and float all of them to the left with a fixed pixel height. If you want to keep sidebar text from flowing underneath main content put pixel or percent values on both div heights. If you use HTML5 you can use flex boxes or section tags to avoid using divs. Here are some helpful links for you: check out matthew james taylor's design blog1: http://matthewjamestaylor.com

cssflexboxes

960 grid system

You might also consider checking out a book: CSS the missing manual. There's gobs of good stuff in there-a great resource.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Putting 2 lists side by side

From Dev

Side by side div where right div has fixed width

From Dev

Putting a CSS ribbon on the opposite side

From Dev

Putting divs side by side

From Dev

Putting 2 divs side by side with image+text

From Dev

Side by Side Div With one Fixed size and another width as percentage

From Dev

Placing 3 div's side by side (1 fixed, 2 with 100% of free space and 3 auto)

From Dev

Plot 2 tmap objects side-by-side

From Dev

CSS align 2 divs side by side

From Dev

Displaying 2 images side by side with space (Css)

From Dev

Bootstrap CSS: Fixed Left Side Bar

From Dev

CSS3 - Rotation by fixed side

From Dev

2 columns, one side fluid , one side fixed

From Dev

Putting matrices side by side to create another matrix

From Dev

putting blocks of nav side by side vertically

From Dev

CSS blocks side by side

From Dev

Adding a background that has no top on side margin in css

From Dev

Fixed side bar on scroll

From Dev

Bootstrap Side Navbar fixed

From Dev

Placing 2 Divs side by side and css code compression

From Dev

Placing 2 Divs side by side and css code compression

From Dev

HTML & CSS: display two block side by side with 2 button

From Dev

PHP GD library, turn 2 images into 1 side by side

From Dev

Boostrap side by side grid, in fixed space

From Dev

Side by side fixed divs - one is overriding the other

From Dev

CSS: two side-by-side p tags, same height, left one fixed-width & known height

From Dev

How to make a fixed side navigation bar move to the right side on html/css?

From Dev

Position Absolute Side by Side CSS

From Dev

CSS/HTML Boxes side by side