Databases
StackOverflow2013
Postsdbo
POmiddle column in css layout doesn't wrap
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POmiddle column in css layout doesn't wrap
    primarykey
    data
    text
    <p>EDIT: Okay, so I'm at a bit of a loss here. Actually, at a lot of a loss. I'm seriously considering growing a personal hatred for CSS and its counter-intuitiveness.</p> <p>So I was trying to make a 3-column layout. It used to be based on the <a href="http://matthewjamestaylor.com/blog/perfect-3-column.htm" rel="nofollow">Holy Grail layout</a>, but then I decided I don't need the fluidity or the equal column heights, and began modifying the CSS to better suit my needs. </p> <p>First, the text in the center column, instead of wrapping, kept stretching the middle column, moving it under the left column. I implemented @ZincX's suggestion of using fixed width columns (see his post below). This fixed the columns, but the containers around them didn't stretch with them. If you open my site (see link below), there's an entire footer hidden behind the header.</p> <p>Also, I decided to do hierarchic markup - I moved the header to the bottom of the source code, and put it on top with absolute positioning. I'll probably do this with the left navigation column as soon as I get this sorted out. For those unfamiliar with the practice, I only learned about it the other day, too - putting your important content on the top of the page makes it a bit more search engine-friendly.</p> <p>So how can this huge mess of a layout be fixed? I just want a simple "header, three columns, footer" layout. Is giving absolute positions in pixels even a good practice that displays well in most browsers?</p> <p><a href="http://poland.inbulgaria.org/" rel="nofollow">Here's the site I'm working on</a>.<br> <a href="http://poland.inbulgaria.org/style.css" rel="nofollow">And here's my stylesheet</a>.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USegasimus
    1. USegasimus
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POmiddle column in css layout doesn't wrap
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POmiddle column in css layout doesn't wrap
      1. USegasimus
      1. VTFavorite
    1. CO@Egasimus - are you looking to make a website with a header, three columns (the left and right taking up as much width as they need and the middle taking up the remaining space) and then a footer?
      singulars
      1. POmiddle column in css layout doesn't wrap
      1. USMy Head Hurts
    2. COWell, I'm not sure if I'd put it that way - but the left and right columns would be fixed width (160px or so), and the middle column would indeed take up all the remaining space. The entire layout would take up 90% of the viewport (min-width: 600px; max-width: 900px), and would preferably be centered. I'm feeling quite frustrated about not being able to solve what's supposed to be a fairly easy problem...
      singulars
      1. POmiddle column in css layout doesn't wrap
      1. USegasimus
    3. COI think I'm giving up on using position: absolute - absolute divs are taken out of the flow and, unlike floats, it seems there's no way to make the container enclose them...
      singulars
      1. POmiddle column in css layout doesn't wrap
      1. USegasimus
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload