Reputation: 11

css columns auto break

I have try my self in three days and can't fix it. Please help me. Thank you so much.

Red: My code now.
Blue: Result i want to change.

I'm just try to learn from zero at home, but i love it and won't give up, please teache me if you can. Thank you.

So, here's my code.

#container {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

#sidebar-left, #sidebar-right {
    width: 20%px;
    float: left;
    margin-right: auto;
    margin-left: auto;
}

#navbar-center {
    width: 56%;
    height: 40px; 
    float: left;
    margin-left: 40px;
    display: block;
}

#sidebar-left ul,  #sidebar-right ul, #navbar-center ul {
    list-style-type: none;
    text-align: auto;
}

#sidebar-left li, #sidebar-right li, #navbar-center li {
    display: block;
    color: #666;
    width: 100px;
    height: 40px;
    line-height: 40px;
}

#sidebar-left a:hover, #sidebar-right a:hover, #navbar-center a:hover {
    color: #FFF;
    background-color: #666;
}

.wrap-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 25px;
    overflow: hidden;
    height: 24px;
    padding-bottom: 4px;
    border-bottom: 2px solid #666;
}

Upvotes: 1

Answers (2)

londongrammar

Reputation: 163

Using flexbox will do the trick - just set the parent to display-flex and flex-wrap: wrap and children to flex-basis: 20%.

As per your screenshot, my understanding is that you're trying to create a 3 column layout (left sidebar, center and right sidebar), and the center block itself should contain 12 items aligned into 5 columns. Below is your modified code to show how to achieve this kind of alignment with the Flexbox technique I mentioned before.

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
ul {
	list-style: none;
}
.container {
	display: flex;
	text-align: center;
}
.sidebar-left,
.sidebar-right {
	flex-basis: 15%;
	background-color: #D0FBE1;
}
.center {
	flex-basis: 70%;
	background-color: #C4F9FF;
}
.content-center {
	display: flex;
	flex-wrap: wrap;
}
.wrap-title {
	flex-basis: 20%;
}

<div class="container">

	<div class="sidebar-left">
		<h3>Tin Tức</h3>
		<ul>
			<li><a href="#">Tin Tức 1</a></li>
			<li><a href="#">Tin Tức 2</a></li>
			<li><a href="#">Tin Tức 3</a></li>
			<li><a href="#">Tin Tức 4</a></li>
			<li><a href="#">Tin Tức 5</a></li>
			<li><a href="#">Tin Tức 6</a></li>
		</ul>
	</div>

	<div class="center">
		<h3>Thể Loại</h3>
		<div class="content-center">
			<div class="wrap-title"><a href="#">Thể Loại 1</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 2</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 3</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 4</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 5</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 6</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 7</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 8</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 9</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 10</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 11</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 12</a></div>
		</div>	
	</div>	

	<div class="sidebar-right">
		<h3>Danh Mục</h3>
		<ul>
			<li><a href="#">Danh Mục 1</a></li>
			<li><a href="#">Danh Mục 2</a></li>
			<li><a href="#">Danh Mục 3</a></li>
			<li><a href="#">Danh Mục 4</a></li>
			<li><a href="#">Danh Mục 5</a></li>
			<li><a href="#">Danh Mục 6</a></li>
		</ul>	
	</div>
</div>

Regarding your code, I would recommend the following:

Your HTML is not valid: the #navbar is unclosed, the footer has to be inside the body, and couple other things - please insert your code here and see the report, it will help you fix all the errors.
Your CSS is also somewhat invalid, multiple rules not being executed because of typos (e.g. width: 20%px;) - you can use this tool to validate your stylesheet.
You shouldn't use ID selectors in CSS unless you know why you're doing this. ID selectors have priority over other kinds of selectors, if your page grows, the code becomes harder to maintain.
I would suggest reading this for better understanding on how to structure your HTML, and maybe going through all other tutorials on MDN from there step by step - it’s a great source to learn how to build things.
And if you want to learn more about how flexbox works - here is a comprehensive guide.

Upvotes: 1

Try My Best

Reputation: 11

* {
  margin: 0;
  padding: 0;
  margin: none;
  box-sizing: border-box;
}
body {
	font-family: roboto;
  	color: #333;
  	background: transparent url(https://i.imgur.com/78YXS1N.) no-repeat;
  	background-size: cover;
  	padding: 40px 10%;
}

a {
	text-decoration: none;

}


#menu-navbar, #menu-header {
	height: 40px;
	background-color: transparent;
	margin: 5px 0px;
}


#menu-navbar ul {
	list-style-type: none;
	text-align: right;
}

#menu-navbar li {
	display: inline-block;
	color: #666;
	width: 100px;
	height: 40px;
	line-height: 40px;
}

#menu-navbar a, #sidebar-left a, #sidebar-right a, #navbar-center a {
	display: block;
	text-align: center;
}

#menu-navbar a:hover {
	color: #FFF;
	background-color: #666;
}

#container {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}

#sidebar-left, #sidebar-right {
	width: 20%px;
	float: left;
	margin-right: auto;
	margin-left: auto;
}

.center {
	width: 56%;
	line-height: 40px;
	float: left; 
	display: inline-flex;
	flex-wrap: wrap;

}

.wrap-title {
	font-size: 18px;
	flex-basis: 20%;
	text-align: center;

}



#sidebar-left ul,  #sidebar-right ul, .wrap-title {
	list-style-type: none;
	text-align: auto;
}

#sidebar-left li, #sidebar-right li, .wrap-title {
	display: block;
	color: #666;
	width: 100px;
	height: 40px;
	line-height: 40px;
}

#sidebar-left a:hover, #sidebar-right a:hover, .center a:hover {
	color: #FFF;
	background-color: #666;
}





#footer {
	clear: both;
}

<!DOCTYPE html>

<html lang="vi">
	<head>
		<meta charset="utf-8" />
		<title>Thư Giới</title>
		<meta name="author" content="ThuGioi" />
		<meta name="description" content="Doc truyen hay online hoan toan mien phi day du the loai cap nhat lien tuc" />
		<meta name="keywords" content="doc truyen, doc truyen hay, truyen hay online, thu gioi, the gioi truyen" />
		<meta name="generator" content="Thu Gioi" />
		<link rel="stylesheet" type="text/css" href="style.css" />
		<link rel="stylesheet" type="text/css" href="normalize.css" />
		<meta name="viewport" content="width=device-width, initial-scale=1">

	</head>	

	<body>

		<header>
			<div id="navbar">
				<div id="logo">
					<img src="https://i.imgur.com/IJqFHP5.pn" title="banner" alt="Test Page" />
				</div>	

				<div id="menu-navbar">
					<ul>
						<li><a href="#">Tìm Kiếm</a></li>
						<li><a href="#">Tài Khoản</a></li>
						<li><a href="#">FanPage</a></li>
						<li><a href="#">Diễn Đàn</a></li>		
					</ul>	
				</div>

				<div id="container">

				<div id="sidebar-left">
					<ul>
						<h3>Tin Tức</h3>
						<li><a href="#">Tin Tức 1</a></li>
						<li><a href="#">Tin Tức 2</a></li>
						<li><a href="#">Tin Tức 3</a></li>
						<li><a href="#">Tin Tức 4</a></li>
						<li><a href="#">Tin Tức 5</a></li>
						<li><a href="#">Tin Tức 6</a></li>
					</ul>
				</div>

				<div class="center">
						<h3>Thể Loại</h3>
						<div class="wrap-title"><a href="#">Thể Loại 1</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 2</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 3</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 4</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 5</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 6</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 7</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 8</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 9</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 10</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 11</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 12</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 13</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 14</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 15</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 16</a></div>	
				</div>	

				<div id="sidebar-right">
					<ul>
						<h3>Danh Mục</h3>
						<li><a href="#">Danh Mục 1</a></li>
						<li><a href="#">Danh Mục 2</a></li>
						<li><a href="#">Danh Mục 3</a></li>
						<li><a href="#">Danh Mục 4</a></li>
						<li><a href="#">Danh Mục 5</a></li>
						<li><a href="#">Danh Mục 6</a></li>
					</ul>	

				</div>

				<div id="content">

					<div class="left-content">


					</div>	


				</div>	


			</div>	

			<div id="footer">
				
			</div>			



		</header>	
	</body>

	<footer>

	</footer>

</html>

Upvotes: 0

css columns auto break

Answers (2)

Related Questions