Как я могу сделать 2 divs рядом друг с другом?

Мне нужно сделать navbar в левой части экрана и текстовым div, чтобы начать прямо рядом с навигационной панелью. Мне удалось сделать текст div до упора вправо. До сих пор у меня есть это:Как я могу сделать 2 divs рядом друг с другом?

HTML

<head> 

<link rel = "stylesheet" type = "text/css" href = "styles.css"> 
<title>Homepage</title> 

</head> 

<body> 
<div id = "header"> 
    <h1>Homepage - origins of World Wide Web and the Internet</h1> 
</div> 
<div id = "wrapper"> 
    <div id = "navbar"> 
     <ul> 
     <li><a class = "active" href="index.html">HOMEPAGE</a></li> 
     <li><a href="news.asp">INTERNET PIONEERS</a></li> 
     <li><a href="contact.asp">HTTP</a></li> 
     <li><a href="about.asp">TERMINOLOGY</a></li> 
     <li><a href="about.asp">REFERENCES</a></li> 
     </ul> 
    </div> 

    <div id = "text"> 
     <h2>World Wide Web</h2> 

    </div> 
</div>

CSS:

#header { 


width: 97%; 
    height: 70px; 
    background: black; 
    position: relative; 
    border: 5px solid white; 
    margin: 20px; 
} 

#header:after { 
    content: ''; 
    position: absolute; 
    top: -15px; 
    left: -15px; 
    right: -15px; 
    bottom: -15px; 
    background: #600202; 
    z-index: -1; 
} 

#header h1 { 
    font-family: Arial; 
    color: white; 
    text-align: center; 
} 



#navbar { 
    padding-left: 8px; 
    margin:5px; 
} 

#navbar ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 15%; 
    background-color: #f1f1f1; 
    position: fixed; 
    overflow: auto; 
    border: 5px solid black; 
    border-radius: 3%; 
    font-family: Arial; 
    font-weight: bold; 
} 

#navbar li a { 
    display: block; 
    color: #000; 
    padding: 8px 16px; 
    text-decoration: none; 
} 

#navbar li a:hover { 
    background-color: #555; 
    color: white; 
} 

#navbar li a.active { 
    background-color: #600202; 
    color: white; 
} 


#navbar li { 
    text-align: center; 
    border-bottom: 5px solid black; 
} 

#navbar li:last-child { 
    border-bottom: none; 
} 

#text { 
    border:1px solid black; 

}

источник

2016-10-29 Marino Bjelopera

Вы не должны использовать 'position: absolute;' здесь, float или display могут быть намного эффективнее. –

Но это положение: абсолютное; для заголовка div и не должен иметь никакого отношения к содержанию под ним? Или я ошибаюсь –

вы правы, у меня был слишком быстрый взгляд, вы также можете использовать коробку-тень и отказаться от этого абсолютного псевдо :) (я только заметил, что пропустил часть вашего css слишком плохой связи) –

Как уже упоминалось Хавьер, проблема существует из-за сочетания position:fixed и float:left, ширина в процентах вычисляется неправильно, потому что элемент удален из потока документа.

Есть некоторые проблемы с кодом, который мы должны заботиться о первом:

1.) position:fixed является частью #navbar ul, но в случае, если бы прокручивать, контейнер Navbar также прокручивают бы вместе с текстом , фиксированная навигация затем будет прокручиваться вместе со своим родительским контейнером.

2.) Ширина определена в элементе ul (предотвращение растягивания элементов до соответствующей длины), сам элемент позиционируется как фиксированный, поэтому родительский элемент не имеет самой ширины (поскольку элемент не является визуализируются как часть окружающего потока документов), именно поэтому #text элемента расположен ниже #navbar элемента при использовании float:left

Одно решения ...

... может быть, чтобы переместить position: fixed к #navbar элемент, п определяют фиксированный левый край для #text элемента:

#text { 
    margin-left: 240px; 
    border: 1px solid black; 
} 

#navbar { 
    padding-left: 8px; 
    margin: 5px; 
    width: 220px; 
    position: fixed; 
} 

#navbar ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    background-color: #f1f1f1; 
    border: 5px solid black; 
    border-radius: 3%; 
    font-family: Arial; 
    font-weight: bold; 
}

Я создал скрипку, содержащую полное изменение here.

источник

2016-10-29 11:59:48 SaschaM78

Большое спасибо sir :) –

#navbar { 
    padding-left: 8px; 
    margin:5px; 
    float: left; 
} 

#navbar ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    /*width: 15%;*/ 
    background-color: #f1f1f1; 
    /*position: fixed;*/ 
    overflow: auto; 
    border: 5px solid black; 
    border-radius: 3%; 
    font-family: Arial; 
    font-weight: bold; 
} 

#text { 
    border:1px solid black; 
    float: left; 
}

источник

2016-10-29 11:36:53

Пробовал это, но чем текст div находится под панелью навигации. –

Правило '#navbar ul' установлено в положение 'fixed' с шириной '15% '. Удалите их (я обновил ответ). –

Я пытался помочь –

Я попытался это с кодом Хавьер Рей написал, и она работала именно так, как вы хотите , Попробуйте временно удалить стили, связанные с nav и div, из-за полей и отступов.

источник

2016-10-29 11:50:14

Как я могу сделать 2 divs рядом друг с другом?

ответ

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