CSS Не удается правильно состыковать правую панель

Я новичок в ASP и CSS, поэтому этот вопрос, я не сомневаюсь, будет казаться очень простым для многих.CSS Не удается правильно состыковать правую панель

Я пытаюсь создать веб-страницу с панелью с левой стороны, панель с правой стороны и основное содержимое между ними.

Моя разметка выглядит следующим образом -

<body> 
    <div id="Header"> 
     <a id="A1" runat="server"></a> 
    </div> 
    <div id="LeftPanel"> 
     This is my LeftPanel</div>  
    <form id="form1" runat="server"> 
    <div id="MainContent"> 
     <asp:ContentPlaceHolder ID="cpMainContent" runat="server"> 
     </asp:ContentPlaceHolder> 
    </div> 
    <div id="RightPanel"> 
     This is my RightPanel</div> 
    </form> 
</body>

У меня есть отдельный файл CSS, чтобы предоставить детали макета, считывающий -

#LeftPanel 
{ 
    margin-left: 100px; 
    margin-top: 50px; 
    margin-right: 25px; 
    border-width: 1px; 
    border-style: ridge; 
    border-color: rgb(0, 165, 240); 
    width: 200px; 
    height: 500px; 
    float: left; 
} 

#MainContent 
{ 
    color: Black; 
    margin-left: 120px; 
    margin-top: 50px; 
    margin-right: 25px; 
    width: 1000px; 
    height: 500px; 
} 

#RightPanel 
{  
    margin-top: 50px; 
    border-width: 1px; 
    border-style: ridge; 
    border-color: rgb(0, 165, 240); 
    width: 200px; 
    height: 500px; 
}

Теперь на левой стороне экрана появится мой LeftPanel по желанию, и мой MainContent появляется справа от LeftPanel (опять же, как планировалось). Однако по причинам, которые я не могу решить, RightPanel появляется в левой части экрана и ниже разделов LeftPanel и MainContent.

Я уверен, что это будет что-то простое, но, как я уже сказал, я очень новичок в ASP и CSS.

источник

2013-06-28 PJW

Добавить

float: left;

к #MainContent и #RightPanel

Я также интересно, если это немного слишком много: ширина: 1000px;

источник

2013-06-28 11:25:54 Ilkka

Я ранее пробовал поплавок: остался в #MainContent и #RightPanel, и это не помогло. Но когда я добавил их снова, и попробовал ваше предложение уменьшить ширину #MainContent, это сработало !! Спасибо. Однако, если пользователь уменьшает размер окна, панели снова появляются друг под другом. Как я могу исправить панели, чтобы они оставались на месте, когда Пользователь уменьшает размер окна? – PJW

Вы должны были бы внешний DIV, как это (вы должны настроить правильную ширину, 1200 просто пример):

This is my LeftPanel

Main content

This is my RightPanel

– Ilkka

CSS Не удается правильно состыковать правую панель

ответ

Смежные вопросы