Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

How do I align these two?

HI, how can I align this two? so they expand 100% whatever size they have, in the same line, without getting out of a line. With table CSS and table CELL?

If you look at the header here on this siete https://www.airbnb.co.uk/

their input expands 100%, if i do that on mine, it goes to the next line, what is the techniue to do it?

Christian Andersson
Christian Andersson
8,712 Points

Hey there Aurelian Spodarec,

can you show us the code you're working with? Edit your question and add the code.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

O meh..

I alwasy write the question and then i forget to add links.

Well, look at my site here https://aurelianspodarec.github.io/sassairbnb/ now, look at the input, expand it to 100% width, but it should be 100% width in the place where it's currently, so it doesn't go on the next line.

And here is another code , on codepen http://codepen.io/Aurelian/pen/bwEoPA?editors=1100

See tha torange button? i need to make it align with the input to it's 100% with the input. How can i achieve it with display table? table-cell. And other techniques will be nice to know as well.

I'm not using bootstrap btw or any framework, just Sass and handcode it all.

3 Answers

Claudiu Bancos
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Claudiu Bancos
Front End Web Development Techdegree Graduate 22,468 Points
Claudiu Bancos
.a{fill-rule:evenodd;}techdegree seal-36
Claudiu Bancos
Front End Web Development Techdegree Graduate 22,468 Points

Tables and cells should not be used for layout. We'll need to see your code if you want detailed help. You could try something like "max-width: 100%" though. There's also "white-space: nowrap" (perhaps with "overflow: hidden") if you want to stop text from wrapping.

Christian Andersson
Christian Andersson
8,712 Points

Without the code, it's hard to tell whether he would be using tables for layout or not. There's nothing wrong with having input fields inside table cells, or displaying a div as such for example.

Claudiu Bancos
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Claudiu Bancos
Front End Web Development Techdegree Graduate 22,468 Points
Claudiu Bancos
.a{fill-rule:evenodd;}techdegree seal-36
Claudiu Bancos
Front End Web Development Techdegree Graduate 22,468 Points

The teachers here at Treehouse seem to discourage the use of tables for general layout these days, and argue that they should only be used to display tabular data/content. I think the best practice these days is to use alternative layout methods like floats, grid layouts that aren't based on tables, and flexbox. Using tables for layout used to be normal, but nowadays we have much better methods available to us.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

:D I'm about layouts , table in css lol i don't know how to say it different without knowing the 90s table style, bootstrap uses it and frameworks, pretty much everyone :D if you look on airbnb , even Guil in some tutorial, but here is another thing im trying to figure out.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

I just want to be extraordinary clear

  • HTML table layout for markup = bad
  • HTML table layout for structured data = okay
  • CSS display property of table = okay

Still don't know why you wouldn't/couldn't use flexbox here. You can get the search bar to grow into the remaining space, and by default flex children want to be on the same row.

If you wanted to do it the old school way, you could use the css display property of table, and than model your html markup around that.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Yeah, I tried that but it seems it doesn't work. Well, I'm learning in deepth on how to make the old school CSS, and when it comes time, I will do all the Flexbox CSS courses.

Vance Rivera
Vance Rivera
18,322 Points
Vance Rivera
Vance Rivera
18,322 Points

It's hard to suggest or give an accurate answer when we don't know what you are working with and have no examples. But I think what you want to do is create a container and equally distribute widths for each column element in the container (the sum of the columns equal 100% however you want to split it). Once that is created you can fill the columns with any element you wish and the width should not exceed the column width unless you specifically change the properties in css. Take a look at flexbox to get you going in the right direction. Flexbox makes page layouts more simple and is very dynamic, allowing you to equally distribute rows and columns within a containing element and position elements with less markup and headaches. Only downside is support on older browsers. Treehouse has some great courses on flexbox. Hope this is helpful. Cheers!

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

I know how to layout any kind of website :D I just need help with this little thing I poisted above right now :D I'm learning a lot of new techniques by coping other people sites