Jump to content
  • 0

Два DIV: левый резиновый, правый фиксированый


tolik777
 Share

Question

Проблема в общем то вот какая.

Есть сайт с дизайном: http://cxem.net/arduino/arduino.php, мне нужно справа добавить панель. Т.к. я старой закалки и секу в основном в табличной верстке, в DIV'ах пока что не очень получается реализовать такую вещь:

нужно сделать панель справа, типа меню. Фиксированого размера (около 150-200 пикселей), а левую основную панель с контентом резиновую. Чтобы между 2-мя панелями был какой-то промежуток 10-20 px.

Справа я панель присобачил кое-как, но вот левая панель либо наезжает на нее, при задании у нее свойства width:80% (незнаю какое тут число ставить), либо не доезжает.

Подскажите как сделать?

Заранее спасибо

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Для таких задач используется метод "отрицательных отступов" что бы не повторяться дам ссылку по которой я разбирался с данным вопросом http://i2r.ru/static/476/out_21614.shtml.

Или гугл: Верстка отрицательными margin.

Как пожелание разработчикам сайта: тема довольно актуальная, но совершенно не освещенная в примерах макетов которые тут встречаются http://htmlbook.ru/layout. Просьба, по возможности добавить примеры: двухколоночный макет (1-я колонка в рх, 2-я в %) и трехколоночный макет (1-я и 3-я колонка в рх, 2-я в %)

Link to comment
Share on other sites

  • 0

Да тут все просто. В родительский див засовываешь еще два. Первому задаешь правый маржин на ширину второго блока + отступ который тебе нужен. Второму задаешь флоат вправо + ширина в пх. Первому ширину задавать не нужно, там дефолтовое значение авто, блок и так будет занимать все пространство. Первому еще оверфлоу хайден задать можно. Все должно работать.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy