2012-06-24 2 views
0

Я хочу иметь две колонки внизу этой веб-страницы, которую я делаю, но они выходят друг на друга, а не рядом друг с другом. Что я делаю не так?Почему мои столбцы не выравниваются правильно?

Вот HTML:

<!doctype html> 
<html> 
<head> 
<meta charset=utf-8"> 
<title>Untitled Document</title> 
</style> 
<style type="text/css"> 
@import url("adobeIndex.css"); 
</style> 
</head> 

<body> 
<div id="container"> 
<div id="banner">Content for id "banner" Goes Here</div> 
<div id="left-text">Content for id "left-text" Goes Here</div> 
<div id="1-left-column">Content for id "1-left-column" Goes Here </div> 
<div id="1-right-column"> Content for id "1-right-column" Goes Here</div> 
</div> 
</body> 
</html> 

И CSS:

@charset "utf-8"; 
/* CSS Document */ 

#container { 
width:968px; 
background: #00F; 
margin:auto; 
padding-left:10px; 
padding-right:10px; 
overflow:hidden; 
} 

#left-text { 
width:300px; 
height:400px; 
margin-top:20px; 
margin-bottom:20px; 
} 

#1-left-column, #1-right-column { 
width: 464px; 
float: left; 
} 
#1-right-column { 
margin-left: 20px; 
} 
+1

Там нет нужно добавить «HTML5» и «CSS» в свой заголовок. Stack Overflow автоматически добавляет теги в заголовок. –

ответ

2

Не запускайте ваши имена идентификаторов с номерами, используйте left-column и right-column или one-left-column и one-right-column вместо

+0

Это действительно все, что нужно, см. Пример скрипки [здесь] (http://jsfiddle.net/rEEQA/). – Nit

+0

Ничего себе, ресурсы, которые я читал за последний год, никогда не говорили мне об этом. Благодаря! –

+0

Вот для чего нужны удивительные сообщества, уменьшая растущие боли! Если этот ответ достаточно для вас, отметьте его как правильно, чтобы сообщество узнало, что на него ответили. – GrayB

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