CSS responsive layout in columns

Asked

Viewed 1,345 times

3

I am making a layout that will have two columns, the first on the left will compose a menu the second will occupy all the remaining space on the screen on the right side and in it will be the contents.

When developing the css of these columns I came across the following problem the first column(.sidebar) is float left the second(.maincontent) no, because width will have to be responsive however when placing content within the .maincontent the line break of the contents corresponds to the size of the .sidebar therefore the orientation of the content in the .maincontent was wrong, the line break was too big and disproportionate, to try to solve this problem defined the .maincontent like float left and ready the problem apparently was solved but suddenly another one appeared, the width of . maincontent has been proportional to the content to take up the remaining space of the screen, and I’m not able to solve this problem let the line break from . Right and independent maincontent and responsive width.

for better understanding I will attach the Screenshots and the examples in jsfiddle.net inserir a descrição da imagem aqui

Example jsfiddle editable link

Example link outside the iframe

inserir a descrição da imagem aqui

Example jsfiddle editable link

Example link outside the iframe

I would like a solution without having to use width in percentage as in this Dashboard.

html css css3 responsive-layout

  • Dude, ever tried to use the bootstrap ? With it is very easy than you do directly in hand... In it comes everything in an easy way to use.

  • Guy maybe I haven’t looked right rsrs but I have researched and I haven’t found this solution in bootstrap, if you have any examples will be welcome.

  • I think, that this part of the tutorial will be very welcome for you: at that link. As he works with grid, you can do exactly what you want ! That’s what’s in the pictures right. Here in Devmedia has another tutorial on how to use bootstrap

  • 1

    This is a question totally consistent with its context and an acceptable doubt and totally well explained I do not understand why the downvote and on top of that no one leaves comment this to me is lack of character!!!!!

1 answer

6


Recently I replied a question where the solution, in large part, can be applied here also.

You can solve this problem as follows:

.menu{ /* estilo atribuído ao elemento que contém o menu */
    position:absolute;
    left:0;
    top:0;
    width:200px;    
}
body{
    padding-left:200px /*padding do tamanho do width do menu*/
}

Follows a exemplo prático.

  • I remembered that same question when I read that question!

  • @Kazzkiq thank you so much it seems that only you really read my question and understood! your solution works very well for me!

Browser other questions tagged html css css3 responsive-layout

You are not signed in. Login or sign up in order to post.