Mam pewien problem a mianowicie chciałbym zrobić tytuł np. newsa i po lewej stronie autora a po prawej datę publikacji
I chciałbym to zrobić tak że tytuł newsa ma być na samym środku, a po lewej tak jak teraz jest Autor a po prawej stronie tytułu data, ma ktoś pomysł jak wykonać takie coś aby tytuł się nie przesuwał w żadną stronę tylko był na środku?
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<title>Pierwszy CMS!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="headerMenu">
<ul class="left">
<li class="active"><a class="active" href="default.asp">Strona Główna</a></li>
<li><a href="#">Projekty</a></li>
<li><a href="#">O mnie</a></li>
<li><a href="#">Kontakt</a></li>
<!--<ul class="right" style="float:right; list-style-type: none;">
<li><a class="active" href="#login">Logowanie</a></li>
<li><a href="#register">Rejestracja</a></li>
</ul>-->
</ul>
</div>
<div id="newsContainer">
<div class="newsAuthor">
Autor: GaCeL
</div>
<div class="newsDate">
Data: 2016-03-03
</div>
<div class="newsTop">
<span class="newsTitle">Testowy news</span>
</div>
<div class="newsContent">
<span class="newsContainer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et porta arcu. Sed et convallis nisl, ut porttitor elit. Nam lacinia et lacus sit amet porta. Fusce volutpat ipsum non sem congue, vitae luctus tortor tincidunt. Donec mollis, nibh et gravida gravida, erat mi feugiat magna, eu egestas odio mauris a mi. Duis a ultricies augue, vitae convallis orci. Morbi vitae ultricies nisl, id scelerisque mi.
</span>
</div>
</div>
<div id="sidebarContainer">
</div>
</div>
</body>
</html>
body {
background-color: #f1f1f1;
font-family: Verdana,sans-serif;
margin: 0;
}
#container{
width: 960px;
margin-left: auto;
margin-right: auto;
}
#header{
background-color: #f3f3f3;
border-color: #e7e7e7;
border-style: solid;
border-width: 0 1px 0 1px;
height: 217px;
width: 958px;
}
#newsContainer{
margin: 15px 15px 15px 0;
float: left;
}
.newsAuthor{
float: left;
font-size: 8px;
text-align: center;
height: 10px;
padding: 3px;
margin: 30px 0 0 1px;
color: #666;
}
.newsDate{
float: left;
font-size: 8px;
text-align: center;
height: 10px;
padding: 3px;
margin: 30px 0 0 1px;
color: #666;
}
.newsTop{
width: 650px;
padding: 7px;
background-color: #ddd;
border: 1px solid #c9c9c9;
text-align: center;
}
.newsContent{
width: 650px;
padding: 7px;
background-color: #f3f3f3;
border-color: #e7e7e7;
border-width: 0 1px 1px 1px;
border-style: solid;
text-align: justify;
text-justify: inter-word;
}
span.newsTitle{
font-size: 24px;
color: #666;
}
ul.left{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
border: 1px solid #e7e7e7;
}
ul.right{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
}
li{
float: left;
}
li a{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: #666;
}
li a:hover{
background-color: #ddd;
}
ul li a.active {
color: #fff;
background-color: #008CBA;
}