Issue
I have this box that I want to display on a web page through HTML&CSS. But I can't manage to place the white boxes inside the blue one. Any help is appreciated. The CSS I put is just so I can see the borders of the elements. I want it to look like this
<div class="table">
<h1 class = "title">Data Manipulation Language</h1>
<ul class="content">
<li class = "update">
<p>UPDATE</p>
<p> UPDATE MyTable</p>
<p>SET col1 = 56</p>
<p>WHERE col2 = 'something';</p>
</li>
<li class="insert" >
<p>INSERT<p>
<p>INSERT INTO MyTable(col1, col 2)</p>
<p>VALUES ('value1', 'value2');</p>
<p></p>
</li>
<li class="delete">
<p>DELETE</p>
<p>DELETE FROM MyTable</p>
<p>WHERE col1 = 'something';</p>
<p></p>
</li>
<li class="select">
<p>SELECT</p>
<p>SELECT col1, col2</p>
<p>FROM MyTable;</p>
<p></p>
</li>
</ul>
</div>
.update/.delete/.insert/.select(the classes of the white boxes) {
background-color: #FFFFFF;
left: auto;
float: left;
text-align: left;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 5px;
padding:10px;
border: 6px solid #FF0004;
border-width: 5;
}
Solution
You are using float:left which is breaking the flow of your HTML element. For the layout creation of your application you can use latest layout technique like: flex or Grid and then for the expected style you can write css code.
You can align the list item as per the expected result by simply adding below code.
//this will set the layout as flex for each child element inside this class containing element
.content {
display: flex;
flex-wrap: wrap;
}
//taking 40% width for each list items that will break your layout in two column
.update, .delete, .insert, .select {
width: 40%;
}
Full modified code is available below
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.update, .delete, .insert, .select {
width: 40%;
background-color: #FFFFFF;
left: auto;
text-align: left;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 16px;
padding:10px;
border: 6px solid #FF0004;
border-width: 5px;
}<html>
<head>
<link type="text/css" rel="stylesheet" href="https://www.dropbox.com/s/trsldt0me90jzs8/resume.css"/>
<title></title>
</head>
<body><div class="table">
<h1 class = "title">Data Manipulation Language</h1>
<ul class="content">
<li class = "update">
<p>UPDATE</p>
<p> UPDATE MyTable</p>
<p>SET col1 = 56</p>
<p>WHERE col2 = 'something';</p>
</li>
<li class="insert" >
<p>INSERT<p>
<p>INSERT INTO MyTable(col1, col 2)</p>
<p>VALUES ('value1', 'value2');</p>
<p></p>
</li>
<li class="delete">
<p>DELETE</p>
<p>DELETE FROM MyTable</p>
<p>WHERE col1 = 'something';</p>
<p></p>
</li>
<li class="select">
<p>SELECT</p>
<p>SELECT col1, col2</p>
<p>FROM MyTable;</p>
<p></p>
</li>
</ul>
</div>
</body>
</html>Answered By - Ankit Katheriya
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.