a bit vague. I use news system, on left side i want to get news from world, on right i wont to get news from my country. I really don't know how to solve this problem:http://i48.tinypic.com/15rxzkw.jpg
source:
<div style="width:1000px;">
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/> <br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid red;float:left;width:400px;">news from world</div><br/><br/>
<div style="border:1px solid blue;width:400px;float:right;">news from my country</div><br/><br/>
<div style="border:1px solid blue;width:400px;float:right;">news from my country</div><br/><br/>
<div style="border:1px solid blue;width:400px;float:right;">news from my country</div><br/><br/>
</div>
You need a to clear your floating divs. Put this :
<div style="clear: both;"></div>
http://www.quirksmode.org/css/clearing.html
For example:
<div style="width:1000px;">
<div style="border:1px solid red;float:left;width:400px;">aaaaaaaa</div>
<div style="border:1px solid blue;width:400px;float:right;">bbbbbbb</div>
<div style="clear: both"></div>
<div style="border:1px solid blue;width:400px;float:left;top:0px;">cccccccc</div>
<div style="border:1px solid blue;width:400px;float:right;">dddddddddd</div>
</div>
Its because of the <br /><br />
Remove them because they push element 2,3 and 4 2 rules down.
Also try to separate styles from your html and never use <br /> for styling. (W3C semantics)
You could try this:
<div style="width:1000px;">
<div style="float:left;">
<div style="border:1px solid red;width:400px;">aaaaaaaa</div><br/><br/>
<div style="border:1px solid blue;width:400px;">bbbbbbb</div>
</div>
<div style="float:left;">
<div style="border:1px solid blue;width:400px;top:0px;">cccccccc</div>
<div style="border:1px solid blue;width:400px;">dddddddddd</div>
</div>
</div>
Related
I am creating a website structure with the help of bootstrap.
The problem is while arranging 3 div tags in 1 main div tag, they are not arranging side by side.
They themselves get arranged one below another.
<div class="col-md-12 collapse" style="border:1px solid blue;" id="part1">
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.1</h5></div>
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.2</h5></div>
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.3</h5></div>
</div>
I want to arrange the 3 div tags one beside another.
You need to wrap a row around your columns.
<div class="col-md-12 collapse border-solid border-blue" id="part1">
<div class="row">
<div class="col-md-4 border-solid border-green"><h5>Part 1.1</h5></div>
<div class="col-md-4 border-solid border-green"><h5>Part 1.2</h5></div>
<div class="col-md-4 border-solid border-green"><h5>Part 1.3</h5></div>
</div>
</div>
Please do not use inline css, consider adding classes instead.
.border-solid {
border-style: solid;
border-width: 1px;
}
.border-blue {
border-color: blue;
}
.border-green {
border-color: green;
}
Remove Collapse
<div class="col-md-12" style="border:1px solid blue;" id="part1">
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.1</h5></div>
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.2</h5></div>
<div class="col-md-4" style="border:1px solid green;"><h5>Part 1.3</h5></div>
</div>
.col-md-4 {
display: inline-block;
}
jsfiddle
<div style="width: 100%;">
<div style="float:left; width: 20%">left<hr width="1" size="500">
</div>
<div style="float:none;">middle<hr width="1" size="500">
</div>
<div style="float:right;">right
</div>
Recently I've been updating my site for mobile browsers and have come across a problem with DIV centering and widths.
Essentially I have an inline block of three boxes (DIVs), which sit inside a container DIV. Each of the three boxes adapts its width by a % and this works fine on desktop browsers but on mobile the boxes get pushed down below each other and remain left aligned with their minimum width unchanged (i.e. big blank space created on the right side).
However what I'd like to do is have the boxes become centre aligned when they're pushed down and for each of them to then expand their width to 100% of the container so as to use all the available container width.
<div style="width:50%;background-color:#dadada;padding:4px;border-radius:4px;overflow:hidden;">
<div style="float:left;margin:auto;min-width:33%;">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
<div style="float:left;margin:auto;min-width:33%;">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
<div style="float:left;margin:auto;min-width:33%;">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
</div>
Now I could use Media Queries to solve this (have it adopt float:none and some manual tweaking etc.) or jQuery but I feel like I'm overlooking something simple in vanilla CSS that could do it for both mobile and desktop browsers. Is there a way that's simple and as backwards compatible as possible?
Try this.
I removed float:left from inner divs and made it display:inline-block.
Also added text-align:center to container.
<div style="width:50%;background-color:#dadada;padding:4px;border-radius:4px;overflow:hidden;text-align:center">
<div style="display:inline-block;margin:auto;min-width:33%;">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
<div style="display:inline-block;margin:auto;min-width:33%;">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
<div style="display:inline-block;margin:auto;min-width:33%;">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
</div>
Solution 1: using Media queries
First of all I have changed your inline-css to classes , so that you can easily control them with css.
Secondly I have use simple flexbox approach to solve the problem.
you need to use media query to control the css behaviour for mobile.
Here is the working code:
.box{float:left;margin:auto;min-width:33%}
.section-boxes{width:50%;background-color:#dadada;padding:4px;border-radius:4px;overflow:hidden;}
#media(max-width:768px){
.section-boxes{text-align:center; display:flex; flex-direction:column;}
.box{width:100%;}
}
<div class="section-boxes">
<div class="box">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
<div class="box">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
<div class="box">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
</div>
Solution 2: Using inline css
Using display:inline-block on the box elements
Using calc() method to calculate the width of each box so it works both on mobile and desktop with one code.
Here is the working code:
<div style="width:50%;background-color:#dadada;padding:4px;border-radius:4px;overflow:hidden; text-align:center">
<div style="display:inline-block;margin:0 auto;min-width:calc(33% - 8px);">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
<div style="display:inline-block;margin:0 auto;min-width:calc(33% - 8px);">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
<div style="display:inline-block;margin:0 auto;min-width:calc(33% - 8px);">
<div style="border: 1px solid #aeaefb;">
<div style="width:95%;margin:auto;border: 3px solid #9a244f;">
Content goes into this box...
</div>
</div>
</div>
</div>
I'm supposed to do part of a social network site for a class project. The HTML file itself wouldn't do anything, it's just designing the visual part. I have to do something similar to the 'friends' section in Facebook.
I used a lot of inline css and now I'm thinking it wasn't such a good idea. If you are able to try it, the design messes up when you change the size of the window.
Can you help me or give me any tips so this doesn't happen? Thanks a lot
<!doctype html>
<html>
<head>
<title> </title>
</head>
<body>
<div style="border:1px solid black; width:600px;height:900px;margin:auto;">
<p style="margin:auto; background-color:#f7f7f7;width:600px;height:70px;"></p>
<p style="font-size:20px;font-weight:bolder;position:absolute;top:0px;left:415px;">Amigos</p>
<p style="font-size:15px;font-weight:bolder;position:absolute;top:40px;left:390px;">Todos mis amigos</p>
<p style="border:1px solid black;width:599px;height:0px;position:absolute;top:60px;"></p>
<p id="caja amigo 1" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:110px;left:390px;"></p>
<p id="caja amigo 2" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:225px;left:390px;"></p>
<p id="caja amigo 3" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:340px;left:390px;"></p>
<p id="caja amigo 4" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:455px;left:390px;"></p>
<p id="caja amigo 5" style="border:1px solid black;width:280px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:570px;left:390px;"></p>
<p id="caja amigo 6" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:110px;left:690px;"></p>
<p id="caja amigo 7" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:225px;left:690px;"></p>
<p id="caja amigo 8" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:340px;left:690px;"></p>
<p id="caja amigo 9" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:455px;left:690px;"></p>
<p id="caja amigo 10" style="border:1px solid black;width:260px;height:100px;font-size:20px;font-weight:bold;position:absolute;top:570px;left:690px;"></p>
<img src="friends_24.png" style="width:20px;height:20px;position:absolute;top:20px;left:385px;">
<img src="action.jpg" style="width:100px;height:100px;position:absolute;top:131px;left:391px;">
<p style="position:absolute;top:130px;left:500px;font-weight:bold;color:#1f63d1;">Action Bronson</p>
<p style="position:absolute;top:150px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">3517 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:180px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:202px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:199px;left:566px;width:15px;height:15px;">
<img src="dave.jpg" style="width:100px;height:100px;position:absolute;top:246px;left:391px;">
<p style="position:absolute;top:245px;left:500px;font-weight:bold;color:#1f63d1;">Dave Chappelle</p>
<p style="position:absolute;top:268px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">2985 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:295px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:315px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:315px;left:566px;width:15px;height:15px;">
<img src="edmund.jpg" style="width:100px;height:100px;position:absolute;top:361px;left:391px;">
<p style="position:absolute;top:360px;left:500px;font-weight:bold;color:#1f63d1;">Edmund McMillen</p>
<p style="position:absolute;top:380px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">6219 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:410px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:430px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:430px;left:566px;width:15px;height:15px;">
<img src="eugenia.png" style="width:100px;height:100px;position:absolute;top:476px;left:391px;">
<p style="position:absolute;top:480px;left:500px;font-weight:bold;color:#1f63d1;">Eugenia Cooney</p>
<p style="position:absolute;top:500px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">8123 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:525px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:545px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:545px;left:566px;width:15px;height:15px;">
<img src="kim.jpg" style="width:100px;height:100px;position:absolute;top:591px;left:391px;">
<p style="position:absolute;top:590px;left:500px;font-weight:bold;color:#1f63d1;">Kim Kardashian</p>
<p style="position:absolute;top:610px;left:500px;font-weight:lighter;color:#9ca2ad;font-size:15px;">11799 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:640px;left:500px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:660px;left:504px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:660px;left:566px;width:15px;height:15px;">
<img src="kimjong.jpg" style="width:100px;height:100px;position:absolute;top:131px;left:691px;">
<p style="position:absolute;top:130px;left:800px;font-weight:bold;color:#1f63d1;">Kim Jong-un</p>
<p style="position:absolute;top:150px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">???? amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:180px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:202px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:199px;left:866px;width:15px;height:15px;">
<img src="rhettlink.png" style="width:100px;height:100px;position:absolute;top:246px;left:691px;">
<p style="position:absolute;top:245px;left:800px;font-weight:bold;color:#1f63d1;">Rhett and Link</p>
<p style="position:absolute;top:268px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">7007 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:295px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:315px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:315px;left:866px;width:15px;height:15px;">
<img src="satchel.jpg" style="width:100px;height:100px;position:absolute;top:361px;left:691px;">
<p style="position:absolute;top:360px;left:800px;font-weight:bold;color:#1f63d1;">Russ Parrish</p>
<p style="position:absolute;top:380px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">3015 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:410px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:430px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:430px;left:866px;width:15px;height:15px;">
<img src="snoop.jpg" style="width:100px;height:100px;position:absolute;top:476px;left:691px;">
<p style="position:absolute;top:480px;left:800px;font-weight:bold;color:#1f63d1;">Snoop Dogg</p>
<p style="position:absolute;top:500px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">5289 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:525px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:545px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:545px;left:866px;width:15px;height:15px;">
<img src="trump.jpg" style="width:100px;height:100px;position:absolute;top:591px;left:691px;">
<p style="position:absolute;top:590px;left:800px;font-weight:bold;color:#1f63d1;">Donald Trump</p>
<p style="position:absolute;top:610px;left:800px;font-weight:lighter;color:#9ca2ad;font-size:15px;">599 amigos</p>
<p style="text-align:center;border:1px solid black;width:80px;position:absolute;top:640px;left:800px;font-weight:600;color:#000000;">Amigos</p>
<img src="tick.png" style="position:absolute;top:660px;left:804px;width:10px;height:10px;">
<img src="triangle.png" style="position:absolute;top:660px;left:866px;width:15px;height:15px;">
</div>
</body>
</html>
Yes, position:absolute; is messing your HTML file.
Here are some tips to fix it and to bring more structure into the file:
Give all the elements classes. Elements that look the same should have the same class. Then move the inline style to a stylesheet.
Rename the HTML elements. <p> stands for "paragraph" and therefore should only be used to divide up a longer text. Use <div> for simple blocks.
Remove all occurences of position:absolute;. Move all elements into the right container. (An element that is in front of another element should be inside it)
Layout the elements relative to their parent.
Here's a very simple example how you can layout the grid:
/* Stylesheet */
.container {
width: 500px;
margin: 20px auto;
border: 1px solid gray;
padding: 10px 0 10px 10px; /* spacing */
}
.profile {
display: inline-block; /* this lets the boxes float like words in a text */
border: 1px solid gray;
width: 222px;
min-height: 50px;
margin: 10px; /* spacing */
}
<div class="container">
<div class="profile">Box 1</div>
<div class="profile">Box 2</div>
<div class="profile">Box 3</div>
<div class="profile">Box 4</div>
<div class="profile">Box 5</div>
<div class="profile">Box 6</div>
<div class="profile">Box 7</div>
</div>
If you want the design to stay nice and not broken, you should consider looking at Responsive Web Design. There are a couple of good books on this topic like Responsive Web Design - by ETHAN MARCOTTE. This will fix your problem.
Secondly, for your own benefit you should remove those inline styling because
it make your html looks very messy
it is hard to make changes
My recommendation is to consider adding those css in an external file.
My data is like this
<div class="fl1">floor 1</div>
<div class="fl2">floor 2</div>
<div class="fl2">floor 2</div>
<div class="fl2">floor 2</div>
<div class="fl3">floor 3</div>
Is it possible to display it like this
Mainly you have to use colspan
<table >
<tr>
<td colspan="3" style="width:100%">TEXT</td>
</tr>
<tr>
<td >TEXT</td><td >TEXT</td><td >TEXT</td>
</tr>
<tr>
<td colspan="3" style="width:100%">TEXT</td>
</tr>
</table>
table, th, td {
border: 1px solid black;
}
Try this, Using div and flex.
.cont{
width:200px;
height:100%;
border-style: solid;
}
.f1{
border-style:solid;
margin: 2px;
}
.fl2{
border-style:solid;
width:100%;
margin:2px;
}
.cont2{
display:flex;
}
<div class="cont">
<div class="f1">floor1</div>
<div class="cont2">
<div class="fl2">floor2</div>
<div class="fl2">floor3</div>
<div class="fl2">floor4</div>
</div>
<div class="f1">floor5</div>
</div>
This way basically:
<div style="width:500px;border-style:double">
<div style="border-style:solid;border-width: 1px;">
<div>floor 1</div>
</div>
<div style="display:inline-block; padding-top:2px;padding-left:1px">
<div style="float:left;width:100px;border-width:1px;border-style:solid">floor 2</div>
<div style="float:left;width:100px;border-width:1px;border-style:solid; margin-left:1px">
floor 2</div>
<div style="float:left;width:100px;border-width:1px;border-style:solid; margin-left:1px">floor 2</div>
</div>
<div style="border-style:solid;border-width: 1px;">
<div>floor 1</div>
</div>
</div>
this is my code :
<!DOCTYPE>
<html>
<body>
<div class="main">
<div id="div1" style="float: left;height: 200px;border:1px solid red; ">1</div>
<div style="clear:both"></div>
<div id="div2" style="border:1px solid red;margin-top:20px;background-color: #FFF; ">2</div>
</div>
</body>
</html>
in Chrome margin-top is enabled , div1 and div2 Apart 20px;
but in IE8 , div1 and div2 are always keep together。
you can float:left in second div too.
and with adding a div in the second div you can disable aspects of floated div check http://jsfiddle.net/SzgGz/3/
HTML:
<div class="main">
<div id="div1" style="float: left;height: 200px;border:1px solid red; ">1</div>
<div style="float:left; clear:both"></div>
<div id="div2" style="margin-top:20px; float:left; width:100%;"><div style="border:1px solid red;background-color: #FFF;">2</div></div>
</div>