Как поместить текст под тегом div?

Я использовал divs для создания двух изображений на обеих сторонах таблицы, однако после того, как divs закончили, текст, который вводится с <p>, появляется над divs, несмотря на то, что он был позже в коде. Я хочу, чтобы текст появлялся под таблицей. вот мой код.Как поместить текст под тегом div?

<!Doctype html> 
<html> 
<head> 
<link rel = "stylesheet" type = "text/css" href="website.css"/> 
<title> Stoge Guitars </title> 
</head> 
<body> 
<div id = "container"> 
    <div id = "X"> 
     <img src= "images/workshop.png" id = "guitar"> 
    </div> 
    <div id = "C"> 
     <img src= "images/workshop.png" id = "guitar2"> 
    </div> 
    <div id = "V"> 
     <table> 
     <tr> 
      <th colspan = "5" id = "STOGEGUITARS"> STOGE GUITARS </th> 
     </tr> 
     <tr> 
      <th>Home</th> 
      <th>Our Custom Guitars</th> 
      <th>Forum</th> 
      <th>Workshop Gallery</th> 
      <th>Contact Us</th> 
     </tr> 
     </table> 
    </div> 
    </div> 
<p> This should be below the table </p> 
</body>

CSS

body 
{ 
Background-image:  url("http://images.epiphone.com.s3.amazonaws.com/Products/Les-Paul/Les-Paul- Standard-Plustop-PRO/Gallery/POP_LPSTDPLUSPRO-HB.jpg"); 
background-size: 100% 100%; 
background-repeat: no-repeat; 
background-size: cover; 
} 
#STOGEGUITARS 
{ 
font-size: 20pt; 
font-family: "Times New Roman", Times, serif; 
font-style: italic; 
} 
table, th, td 
{ 
border: 1px solid black; 
} 
table 
{ 
width: 60%; 
margin-left: 20%; 
margin-right: 20%; 
position: fixed; 
} 
#guitar 
{ 
float: left; 
} 
#guitar2 
{ 
float: right; 
} 
#guitar 
{ 
width: 19%; 
height: 100%; 
position: fixed; 
} 
#guitar2 
{ 
width: 19%; 
height: 100%; 
position: fixed; 
right: 0px; 
} 
p 
{ 
border: 0px; 
text-align: left; 
}

Помощь будет весьма признателен спасибо. Извините, если я совершил глупую ошибку, мне всего 16 и новичок в HTML и CSS.

источник

2015-05-30 stuart

Я изменил свой как HTML и CSS код:

JSFiddle

HTML

<center> 
<div id = "container"> 
    <div id = "X"> 
     <img src= "https://fedoraproject.org/w/uploads/6/66/Artwork_F9Themes_Shoowa_shoowa-horizontal.png" id = "guitar" /> 
    </div> 
    <div id = "V"> 
     <table> 
     <tr> 
      <th colspan = "5" id = "STOGEGUITARS"> STOGE GUITARS </th> 
     </tr> 
     <tr> 
      <th>Home</th> 
      <th>Our Custom Guitars</th> 
      <th>Forum</th> 
      <th>Workshop Gallery</th> 
      <th>Contact Us</th> 
     </tr> 
     </table> 
     <p> This should be below the table </p> 
    </div> 
    <div id = "C"> 
     <img src= "https://fedoraproject.org/w/uploads/6/66/Artwork_F9Themes_Shoowa_shoowa-horizontal.png" id = "guitar2" /> 
    </div> 
    </div> 
</center>

CSS

body 
{ 
Background-image:  url("http://images.epiphone.com.s3.amazonaws.com/Products/Les-Paul/Les-Paul- Standard-Plustop-PRO/Gallery/POP_LPSTDPLUSPRO-HB.jpg"); 
background-size: 100% 100%; 
background-repeat: no-repeat; 
background-size: cover; 
margin:0; 
} 
#STOGEGUITARS 
{ 
font-size: 20pt; 
font-family: "Times New Roman", Times, serif; 
font-style: italic; 
} 
table, th, td 
{ 
border: 1px solid black; 
} 
table 
{ 
width:100%; 
} 
#X 
{ 
display:inline-block; 
position: fixed; 
left:0px; 
top:0px; 
width: 19%; 
height: 100%; 
} 

#V 
{ 
margin:0; 
display:inline-block; 
top:0px; 
width: 62%; 
height: 100%; 
border:1px solid red; /* Remove this line it's just for checking boundaries */ 
} 

#C 
{ 
display:inline-block; 
position: fixed; 
right:0px; 
top:0px; 
width: 19%; 
height: 100%; 
} 

img 
{ 
    width:100%; 
    height:100%; 
} 

p 
{ 
position:relative; 
text-align:left; 
}

источник

2015-05-30 21:37:43 divy3993

спасибо, вы сделали мой день – stuart

проверить это fiddle

position: relative;

является то, что вы ищете, позиция фиксированной делает другие элементы игнорировать позицию элемента

источник

2015-05-30 20:51:48 LVDM

Как поместить текст под тегом div?

ответ

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