Jump to content
  • 0

ширина слоя и float


stosen
 Share

Question

Столкнулся с проблемой. Помогите, плиз, решить.

Есть слой контейнер, в нем два слоя хочу поставить один за другим по-вертикали. Ширину как контейнера, так и внутренних слоев, задаю в пикселах.

Внутри слоев image и подпись к ней.

Проблема в том, что в Opera ширина слоев больше, чем в IE, и второй слой перескакивает вниз???

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
Столкнулся с проблемой. Помогите, плиз, решить.

Есть слой контейнер, в нем два слоя хочу поставить один за другим по-вертикали. Ширину как контейнера, так и внутренних слоев, задаю в пикселах.

Внутри слоев image и подпись к ней.

Проблема в том, что в Opera ширина слоев больше, чем в IE, и второй слой перескакивает вниз???

Ширина задается в нормальных браузерах для контента.

Link to comment
Share on other sites

  • 0
Есть слой контейнер, в нем два слоя хочу поставить один за другим по-вертикали.

Если ты хочешь разместить контейнеры по вертикали, то это означает один под другим. И значит див "не перескакивает вниз", а правильно там располагается.

Link to comment
Share on other sites

  • 0
Если ты хочешь разместить контейнеры по вертикали, то это означает один под другим. И значит див "не перескакивает вниз", а правильно там располагается.

Извиняюсь, я имел в виду по-горизонтали

Ширина задается в нормальных браузерах для контента.

Я читал, что плавающим слоям нужно обязательно указывать ширину, иначе это может привести к непредсказуемым результатам

Link to comment
Share on other sites

  • 0

тогда сделай так

вместо двух слоев сделай три

два слоя уложи один в другой

первому и третьему поставь float:left

третьему задай нужную ширину

а слою, который лежит в первом поставь margin-left: ширина слоя который будет ниже (третьего).

типа так

<div id="maincontainer">

<div id="contentwrapper">
<div id="contentcolumn">

</div>
</div>

<div id="leftcolumn">

</div>

</div>

сss

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 0 0 20%;
}

#leftcolumn{
float: left;
width: 20%; /*Width of left column in percentage*/
margin-left: -100%;
background: #C8FC98;
}

Edited by 3ABAPKA
Link to comment
Share on other sites

  • 0

3ABAPKA, это, конечно, выход, но человек так и не найдет, где он напортачил с пэддингами-марджинами. а дело, ИМХО, в них.

Спасибо, всем. Дело действительно было в отступах. А именно отступы от image в IE и Opera различаются

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